feat(aio): add GH-style anchor links to headings (#16161)

Closes #16126

PR Close #16161

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

@@ -0,0 +1,42 @@
+h1, h2, h3, h4, h5, h6 {
+  .icon-link {
+    color: $darkgray;
+    vertical-align: middle;
+    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;
+
+    /* 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'; }
+  }
+
+  a {
+    text-decoration: none;
+    padding-left: 8px;
+    margin-left: -30px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &:hover .icon-link {
+    visibility: visible
+  }
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -23,4 +23,5 @@
    @import 'scrollbar';
    @import 'callout';
    @import 'resources';
-   @import 'edit-page-cta';
+   @import 'edit-page-cta';
+   @import 'heading-anchors';