fix(docs-infra): convert external links to `MatIconButton`s (#42584)

This commit changes the anchor elements used for external links to
`MatIconButton`s. While the appearance remains the same (with the
exception of hover/focus styles), this better aligns the styling of
external link icons with other nearby icon buttons (i.e. the theme
toggle) and alows as to simplify the CSS for external links (since much
of their styling is handled by Angular Material).

PR Close #42584

aio/src/app/app.component.html

@@ -28,13 +28,13 @@
     <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
     <aio-theme-toggle></aio-theme-toggle>
     <div class="toolbar-external-icons-container">
-      <a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
+      <a mat-icon-button href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
         <mat-icon svgIcon="logos:twitter"></mat-icon>
       </a>
-      <a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
+      <a mat-icon-button href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
         <mat-icon svgIcon="logos:github"></mat-icon>
       </a>
-      <a href="https://youtube.com/angular" title="YouTube" aria-label="Angular on YouTube">
+      <a mat-icon-button href="https://youtube.com/angular" title="YouTube" aria-label="Angular on YouTube">
         <mat-icon svgIcon="logos:youtube"></mat-icon>
       </a>
     </div>

aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss

@@ -95,15 +95,5 @@
         border-right: 1px solid constants.$white;
       }
     }
-
-    // EXTERNAL LINK ICONS
-    .toolbar-external-icons-container {
-      a {
-        &:focus {
-          // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-          outline: 1px solid constants.$focus-outline-ondark;
-        }
-      }
-    }
   }
 }

aio/src/styles/1-layouts/top-menu/_top-menu.scss

@@ -198,28 +198,13 @@ mat-toolbar.app-toolbar {
 
   // EXTERNAL LINK ICONS
   .toolbar-external-icons-container {
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
-    height: 100%;
-
     a {
-      display: flex;
-      align-items: center;
-      padding: 0;
-      margin: 24px 8px;
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      &:focus {
-        outline-offset: 8px;
-      }
-
       @media screen and (max-width: 480px) {
-        margin: 0 0 0 8px;
+        margin: 0;
-        padding: 0;
+
+        &:not(:first-child) {
+          margin-left: -8px;
+        }
       }
 
       @media screen and (max-width: 420px) {

goldens/size-tracking/aio-payloads.json

@@ -3,11 +3,11 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4619,
-        "main-es2017": 456578,
+        "main-es2017": 456646,
         "polyfills-es2017": 55210,
-        "styles": 69643,
+        "styles": 69324,
-        "light-theme": 79520,
+        "light-theme": 79417,
-        "dark-theme": 79419
+        "dark-theme": 79316
       }
     }
   },
@@ -15,11 +15,11 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4619,
-        "main-es2017": 456717,
+        "main-es2017": 456785,
         "polyfills-es2017": 55348,
-        "styles": 69643,
+        "styles": 69324,
-        "light-theme": 79520,
+        "light-theme": 79417,
-        "dark-theme": 79419
+        "dark-theme": 79316
       }
     }
   }