From 605f77e50fe35ea9c7cc9e245a38af634655fa83 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 3 Jun 2019 13:11:53 +0200
Subject: [PATCH] feat(top-app-bar): use mdc-icon-button styles instead of top
 app bar (#4745)

---
 packages/mdc-top-app-bar/README.md            | 19 ++++++++------
 packages/mdc-top-app-bar/_mixins.scss         | 25 -------------------
 packages/mdc-top-app-bar/_variables.scss      |  3 ---
 packages/mdc-top-app-bar/mdc-top-app-bar.scss |  5 ----
 packages/mdc-top-app-bar/package.json         |  1 +
 test/screenshot/golden.json                   | 16 ++++++------
 .../dismissible-below-top-app-bar.html        |  6 +++--
 .../spec/mdc-drawer/classes/dismissible.html  |  7 +++---
 .../spec/mdc-drawer/classes/modal.html        |  6 +++--
 .../spec/mdc-drawer/classes/permanent.html    |  4 ++-
 .../mixins/fill-color-accessible.html         |  5 ++--
 .../spec/mdc-drawer/mixins/fill-color.html    |  4 ++-
 .../spec/mdc-drawer/mixins/width.html         |  6 +++--
 ...ine-dense-prominent-with-action-items.html |  9 ++++---
 .../classes/baseline-dense-prominent.html     |  3 ++-
 .../baseline-dense-with-action-items.html     |  9 ++++---
 .../classes/baseline-dense.html               |  3 ++-
 .../baseline-fixed-with-action-items.html     |  9 ++++---
 .../classes/baseline-fixed.html               |  3 ++-
 .../baseline-prominent-with-action-items.html |  9 ++++---
 .../classes/baseline-prominent.html           |  3 ++-
 ...ine-short-collapsed-with-action-items.html |  5 ++--
 .../classes/baseline-short-collapsed.html     |  3 ++-
 .../baseline-short-with-action-items.html     |  5 ++--
 .../classes/baseline-short.html               |  3 ++-
 .../classes/baseline-with-action-items.html   |  9 ++++---
 .../mdc-top-app-bar/classes/baseline.html     |  3 ++-
 27 files changed, 90 insertions(+), 93 deletions(-)

diff --git a/packages/mdc-top-app-bar/README.md b/packages/mdc-top-app-bar/README.md
index 9f07d8d8d4e..17b2c83099b 100644
--- a/packages/mdc-top-app-bar/README.md
+++ b/packages/mdc-top-app-bar/README.md
@@ -44,13 +44,15 @@ npm install @material/top-app-bar
 <header class="mdc-top-app-bar">
   <div class="mdc-top-app-bar__row">
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
       <span class="mdc-top-app-bar__title">Title</span>
     </section>
   </div>
 </header>
 ```
 
+> NOTE: Please see note below about `mdc-icon-button` in the [Top App Bar With Action Items](#top-app-bar-with-action-items) section.
+
 #### Menu Icons
 
 We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:
@@ -67,6 +69,7 @@ However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any
 
 ```scss
 @import "@material/top-app-bar/mdc-top-app-bar";
+@import "@material/icon-button/mdc-icon-button";
 ```
 
 ### JavaScript Instantiation
@@ -85,19 +88,19 @@ const topAppBar = new MDCTopAppBar(topAppBarElement);
 
 ### Top App Bar With Action Items
 
-Top app bars can contain action items which are placed on the side opposite the navigation icon.
+Top app bars can contain action items which are placed on the side opposite the navigation icon. You must also attach the `mdc-icon-button` class to both the `mdc-top-app-bar__navigation-icon` and the `mdc-top-app-bar__action-item` elements in order to get the correct styles applied. For further documentation on icons, please see the [mdc-icon-button docs](../mdc-icon-button/README.md).
 
 ```html
 <header class="mdc-top-app-bar">
   <div class="mdc-top-app-bar__row">
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
       <span class="mdc-top-app-bar__title">Title</span>
     </section>
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
-      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
-      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
+      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
+      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
     </section>
   </div>
 </header>
@@ -111,11 +114,11 @@ Short top app bars are top app bars that can collapse to the navigation icon sid
 <header class="mdc-top-app-bar mdc-top-app-bar--short">
   <div class="mdc-top-app-bar__row">
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
       <span class="mdc-top-app-bar__title">Title</span>
     </section>
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
     </section>
   </div>
 </header>
diff --git a/packages/mdc-top-app-bar/_mixins.scss b/packages/mdc-top-app-bar/_mixins.scss
index 20f446ade70..697476972b1 100644
--- a/packages/mdc-top-app-bar/_mixins.scss
+++ b/packages/mdc-top-app-bar/_mixins.scss
@@ -107,28 +107,3 @@
     }
   }
 }
-
-// Applies styles to the different types of icons that can exist in top-app-bars.
-// Both .mdc-top-app-bar__icon and .mdc-top-app-bar__navigation-icon share all styles except for
-// horizontal padding.
-@mixin mdc-top-app-bar-icon_() {
-  @include mdc-ripple-surface;
-  @include mdc-ripple-radius-unbounded;
-
-  display: flex;
-  position: relative;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: $mdc-top-app-bar-icon-size + $mdc-top-app-bar-icon-padding * 2;
-  height: $mdc-top-app-bar-icon-size + $mdc-top-app-bar-icon-padding * 2;
-  padding: $mdc-top-app-bar-icon-padding;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  fill: currentColor;
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-}
diff --git a/packages/mdc-top-app-bar/_variables.scss b/packages/mdc-top-app-bar/_variables.scss
index 26da01262c1..78236816f90 100644
--- a/packages/mdc-top-app-bar/_variables.scss
+++ b/packages/mdc-top-app-bar/_variables.scss
@@ -26,9 +26,6 @@ $mdc-top-app-bar-title-left-padding: 20px !default;
 $mdc-top-app-bar-section-vertical-padding: 8px !default;
 $mdc-top-app-bar-section-horizontal-padding: 12px !default;
 
-$mdc-top-app-bar-icon-padding: 12px !default;
-$mdc-top-app-bar-icon-size: 24px !default;
-
 $mdc-top-app-bar-mobile-breakpoint: 599px !default;
 
 // Default mobile styles
diff --git a/packages/mdc-top-app-bar/mdc-top-app-bar.scss b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
index dcf695c9518..9287fddf149 100644
--- a/packages/mdc-top-app-bar/mdc-top-app-bar.scss
+++ b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
@@ -76,11 +76,6 @@
     overflow: hidden;
     z-index: 1;
   }
-
-  &__action-item,
-  &__navigation-icon {
-    @include mdc-top-app-bar-icon_;
-  }
 }
 
 @at-root {
diff --git a/packages/mdc-top-app-bar/package.json b/packages/mdc-top-app-bar/package.json
index 25f85944888..c6344664e9e 100644
--- a/packages/mdc-top-app-bar/package.json
+++ b/packages/mdc-top-app-bar/package.json
@@ -23,6 +23,7 @@
     "@material/base": "^1.0.0",
     "@material/elevation": "^1.1.0",
     "@material/ripple": "^2.3.0",
+    "@material/icon-button": "^2.1.1",
     "@material/rtl": "^0.42.0",
     "@material/shape": "^1.1.1",
     "@material/theme": "^1.1.0",
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 6de0514ead6..92fc4b34487 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -1768,34 +1768,34 @@
     }
   },
   "spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html?utm_source=golden_json",
     "screenshots": {
       "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_firefox_66.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_firefox_66.png",
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_ie_11.png"
     }
   },
   "spec/mdc-top-app-bar/classes/baseline-short-collapsed.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html?utm_source=golden_json",
     "screenshots": {
       "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_firefox_66.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_firefox_66.png",
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_ie_11.png"
     }
   },
   "spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html?utm_source=golden_json",
     "screenshots": {
       "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_firefox_66.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_firefox_66.png",
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_ie_11.png"
     }
   },
   "spec/mdc-top-app-bar/classes/baseline-short.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short.html?utm_source=golden_json",
     "screenshots": {
       "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short.html.windows_firefox_66.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short.html.windows_firefox_66.png",
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short.html.windows_ie_11.png"
     }
   },
diff --git a/test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html b/test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
index bdcd91b7f82..0355295b337 100644
--- a/test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
+++ b/test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
@@ -26,10 +26,12 @@
     <title>Dismissible Drawer - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.list.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
@@ -46,11 +48,11 @@
       <header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar test-drawer-top-app-bar--dismissible">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
             <span class="mdc-top-app-bar__title">Dismissible Drawer<i class="test-font--redact-prev-letter"></i></span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-drawer/classes/dismissible.html b/test/screenshot/spec/mdc-drawer/classes/dismissible.html
index f43bb721b2a..45c283d0866 100644
--- a/test/screenshot/spec/mdc-drawer/classes/dismissible.html
+++ b/test/screenshot/spec/mdc-drawer/classes/dismissible.html
@@ -26,11 +26,12 @@
     <title>Dismissible Drawer - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.list.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
-
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
     <script>
@@ -99,11 +100,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
         <header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-              <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
+              <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
               <span class="mdc-top-app-bar__title">Dismissible Drawer<i class="test-font--redact-prev-letter"></i></span>
             </section>
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
             </section>
           </div>
         </header>
diff --git a/test/screenshot/spec/mdc-drawer/classes/modal.html b/test/screenshot/spec/mdc-drawer/classes/modal.html
index dfdd016c22d..2879282e269 100644
--- a/test/screenshot/spec/mdc-drawer/classes/modal.html
+++ b/test/screenshot/spec/mdc-drawer/classes/modal.html
@@ -26,10 +26,12 @@
     <title>Modal Drawer - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.list.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
@@ -99,11 +101,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
         <header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-              <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
+              <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
               <span class="mdc-top-app-bar__title">Modal Drawer<i class="test-font--redact-prev-letter"></i></span>
             </section>
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
             </section>
           </div>
         </header>
diff --git a/test/screenshot/spec/mdc-drawer/classes/permanent.html b/test/screenshot/spec/mdc-drawer/classes/permanent.html
index 748a8c7537f..4700f38a8ac 100644
--- a/test/screenshot/spec/mdc-drawer/classes/permanent.html
+++ b/test/screenshot/spec/mdc-drawer/classes/permanent.html
@@ -26,10 +26,12 @@
     <title>Permanent Drawer - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.list.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
@@ -102,7 +104,7 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
               <span class="mdc-top-app-bar__title">Permanent Drawer<i class="test-font--redact-prev-letter"></i></span>
             </section>
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
             </section>
           </div>
         </header>
diff --git a/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html b/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
index cf6a9adb773..7d17e0c100e 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
@@ -24,12 +24,13 @@
   <head>
     <meta charset="utf-8">
     <title>fill-color-accessible Drawer Mixin - MDC Web Screenshot Test</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.list.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
@@ -102,7 +103,7 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
               <span class="mdc-list-item__text"><span class="mdc-top-app-bar__title">Permanent Drawer<i class="test-font--redact-prev-letter"></i></span></span>
             </section>
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
             </section>
           </div>
         </header>
diff --git a/test/screenshot/spec/mdc-drawer/mixins/fill-color.html b/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
index 1ec2c74708c..167d4e9bdc4 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/fill-color.html
@@ -26,10 +26,12 @@
     <title>fill-color Drawer Mixin - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.list.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
@@ -102,7 +104,7 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
               <span class="mdc-top-app-bar__title">Permanent Drawer<i class="test-font--redact-prev-letter"></i></span>
             </section>
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
             </section>
           </div>
         </header>
diff --git a/test/screenshot/spec/mdc-drawer/mixins/width.html b/test/screenshot/spec/mdc-drawer/mixins/width.html
index e51426d8a3a..a4db8b29571 100644
--- a/test/screenshot/spec/mdc-drawer/mixins/width.html
+++ b/test/screenshot/spec/mdc-drawer/mixins/width.html
@@ -26,10 +26,12 @@
     <title>Dismissible Drawer - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.drawer.css">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.list.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
 
   <body class="test-container test-container--edge-fonts">
@@ -90,11 +92,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
       <header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
             <span class="mdc-top-app-bar__title">Dismissible Drawer<i class="test-font--redact-prev-letter"></i></span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent-with-action-items.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent-with-action-items.html
index 36c722d29bb..3b025b0aacb 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent-with-action-items.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent-with-action-items.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Dense Prominent w/ Action Items - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,13 +46,13 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--dense mdc-top-app-bar--prominent">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent.html
index 17cf619fb86..53cca40131f 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-prominent.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Dense Prominent - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,7 +46,7 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--dense mdc-top-app-bar--prominent">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
         </div>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-with-action-items.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-with-action-items.html
index 4a90554b174..e04829e2e6e 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-with-action-items.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense-with-action-items.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Dense w/ Action Items - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,13 +46,13 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--dense">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense.html
index a49fb2009d0..356fefab0d0 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-dense.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Dense - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,7 +46,7 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--dense">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
         </div>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed-with-action-items.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed-with-action-items.html
index 22ff0029581..10b78f18ddf 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed-with-action-items.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed-with-action-items.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Fixed w/ Action Items - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,13 +46,13 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--fixed">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed.html
index 6a22096fbed..ae2e969c604 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-fixed.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Fixed - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,7 +46,7 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--fixed">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
         </div>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent-with-action-items.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent-with-action-items.html
index 3c9481c8727..382990da72f 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent-with-action-items.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent-with-action-items.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Prominent w/ Action Items - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,13 +46,13 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--prominent">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent.html
index 0be08d652fa..55fe56479ed 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-prominent.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Prominent - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,7 +46,7 @@
       <header class="mdc-top-app-bar test-top-app-bar mdc-top-app-bar--prominent">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
         </div>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html
index 9a4c9e3781d..3e350a002f7 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Short Collapsed w/ Action Items - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,11 +46,11 @@
       <header class="mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html
index 91474011cc5..c2080884a47 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Short Collapsed - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,7 +46,7 @@
       <header class="mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
         </div>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html
index 12763fec8e9..8d03cdd93ab 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Short w/ Action Items - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,11 +46,11 @@
       <header class="mdc-top-app-bar mdc-top-app-bar--short">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short.html
index 2ea29e129a1..7019a265b29 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-short.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar Short - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,7 +46,7 @@
       <header class="mdc-top-app-bar mdc-top-app-bar--short">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
         </div>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-with-action-items.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-with-action-items.html
index 83cdee191d5..525a9b16246 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline-with-action-items.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline-with-action-items.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar w/ Action Items - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,13 +46,13 @@
       <header class="mdc-top-app-bar test-top-app-bar">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
-            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
           </section>
         </div>
       </header>
diff --git a/test/screenshot/spec/mdc-top-app-bar/classes/baseline.html b/test/screenshot/spec/mdc-top-app-bar/classes/baseline.html
index d2d9f10687c..5add4720d55 100644
--- a/test/screenshot/spec/mdc-top-app-bar/classes/baseline.html
+++ b/test/screenshot/spec/mdc-top-app-bar/classes/baseline.html
@@ -25,6 +25,7 @@
     <meta charset="utf-8">
     <title>Baseline Top App Bar - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.icon-button.css">
     <link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
     <link rel="stylesheet" href="../../../out/spec/mdc-top-app-bar/fixture.css">
@@ -45,7 +46,7 @@
       <header class="mdc-top-app-bar test-top-app-bar">
         <div class="mdc-top-app-bar__row">
           <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
             <span class="mdc-top-app-bar__title">Title</span>
           </section>
         </div>