fix(aio): improve positioning of heading-anchors

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

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