diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index a8834fc4920..7e8e1a94a1d 100644
--- a/aio/src/app/app.component.html
+++ b/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>
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
index da9810c7677..6a8d697bcb5 100644
--- a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
+++ b/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;
-        }
-      }
-    }
   }
 }
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss
index 3114e5dacb9..9d76cc6a80e 100644
--- a/aio/src/styles/1-layouts/top-menu/_top-menu.scss
+++ b/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;
-        padding: 0;
+        margin: 0;
+
+        &:not(:first-child) {
+          margin-left: -8px;
+        }
       }
 
       @media screen and (max-width: 420px) {
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
index a2bc936d368..e9f58604544 100755
--- a/goldens/size-tracking/aio-payloads.json
+++ b/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,
-        "light-theme": 79520,
-        "dark-theme": 79419
+        "styles": 69324,
+        "light-theme": 79417,
+        "dark-theme": 79316
       }
     }
   },
@@ -15,11 +15,11 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4619,
-        "main-es2017": 456717,
+        "main-es2017": 456785,
         "polyfills-es2017": 55348,
-        "styles": 69643,
-        "light-theme": 79520,
-        "dark-theme": 79419
+        "styles": 69324,
+        "light-theme": 79417,
+        "dark-theme": 79316
       }
     }
   }