fix(aio): improve positioning of heading-anchors

aio/src/styles/2-modules/_heading-anchors.scss

@@ -1,42 +1,43 @@
-h1, h2, h3, h4, h5, h6 {
+.sidenav-content {
-  .icon-link {
+  h1, h2, h3, h4, h5, h6 {
-    color: $darkgray;
-    vertical-align: middle;
-    visibility: hidden;
-    margin: 8px;
 
-    font: normal normal 24px 'Material Icons';
+    .mat-icon, .material-icons {
-    display: inline-block;
+      visibility: hidden;
-    line-height: 1;
+      display: inline-block;
-    text-transform: none;
+      color: $mediumgray;
-    letter-spacing: normal;
+      margin: 0 8px;
-    word-wrap: normal;
+    }
-    white-space: nowrap;
-    direction: ltr;
 
-    /* Support for all WebKit browsers. */
+    &:hover {
-    -webkit-font-smoothing: antialiased;
+      .mat-icon, .material-icons {
-    /* Support for Safari and Chrome. */
+        visibility: visible;
-    text-rendering: optimizeLegibility;
+      }
+    }
 
-    /* Support for Firefox. */
+    a {
-    -moz-osx-font-smoothing: grayscale;
+      text-decoration: none;
-
+      padding-left: 8px;
-    /* Support for IE. */
+      margin-left: -50px;
-    font-feature-settings: 'liga';
+      display: inline-block;
-
+      vertical-align: middle;
-    &:before { content: 'link'; }
+    }
   }
 
-  a {
+  .l-sub-section {
-    text-decoration: none;
+    h1, h2, h3, h4, h5, h6 {
-    padding-left: 8px;
+      a {
-    margin-left: -50px;
+        padding-right: 24px;
-    display: inline-block;
+        margin-left: -74px;
-    vertical-align: middle;
+      }
+    }
   }
 
-  &:hover .icon-link {
+  .alert {
-    visibility: visible
+    h1, h2, h3, h4, h5, h6 {
+      a {
+        padding-right: 40px;
+        margin-left: -90px;
+      }
+    }
   }
-}
+}