From 6f976322cc3811df87eebeff9f035ef0b067b035 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Tue, 17 Apr 2018 17:08:49 -0400
Subject: [PATCH] docs(button): Add aria-hidden="true" to icon elements (#2582)

---
 demos/button.html                             | 40 +++++++++----------
 docs/theming.md                               |  2 +-
 packages/mdc-button/README.md                 |  8 ++--
 .../mdc-button/classes/baseline.html          | 32 +++++++--------
 test/screenshot/mdc-button/classes/dense.html | 32 +++++++--------
 .../mdc-button/mixins/filled-accessible.html  |  8 ++--
 .../mixins/horizontal-padding-baseline.html   | 16 ++++----
 .../mixins/horizontal-padding-dense.html      | 16 ++++----
 .../mdc-button/mixins/icon-color.html         | 16 ++++----
 .../mdc-button/mixins/ink-color.html          | 16 ++++----
 .../mdc-button/mixins/stroke-width.html       | 16 ++++----
 11 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/demos/button.html b/demos/button.html
index d1c56fa17b9..11f37e49230 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -119,11 +119,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -148,11 +148,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--raised">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--raised">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -177,11 +177,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--unelevated">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--unelevated">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -206,11 +206,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--stroked">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--stroked">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -238,11 +238,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
           <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Ink Color
             </button>
             <button class="mdc-button mdc-button--stroked demo-icon-color">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon Color
             </button>
           </div>
@@ -262,11 +262,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -291,11 +291,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -320,11 +320,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -350,11 +350,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -382,11 +382,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
           <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Ink Color
             </button>
             <button class="mdc-button mdc-button--stroked demo-icon-color" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon Color
             </button>
           </div>
diff --git a/docs/theming.md b/docs/theming.md
index 004fab6ebca..637c754a35f 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -450,7 +450,7 @@ Then apply the custom class to the button elements:
 
 ```html
 <button class="mdc-button accessible-button">
-  <i class="material-icons mdc-button__icon">favorite</i>
+  <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
   Button
 </button>
 ```
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index ff56055d4e5..3b40585edd2 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -55,9 +55,9 @@ semantically correct.
 ### Adding Icon
 
 Users can nest `mdc-button__icon` inside the button element to add an icon. The icon in button
-is set to 18px to meet legibility requirements.
+is set to 18px to meet legibility requirements. This element should also include `aria-hidden="true"`.
 
-We recommend you load [Material Icons](https://material.io/icons/) from Google Fonts
+We recommend you load [Material Icons](https://material.io/icons/) from Google Fonts:
 
 ```html
 <head>
@@ -65,7 +65,7 @@ We recommend you load [Material Icons](https://material.io/icons/) from Google F
 </head>
 
 <button class="mdc-button">
-  <i class="material-icons mdc-button__icon">favorite</i>
+  <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
   Button
 </button>
 ```
@@ -74,7 +74,7 @@ It's also possible to use an SVG icon:
 
 ```html
 <button class="mdc-button">
-  <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
+  <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="...">
   ...
   </svg>
   SVG Icon
diff --git a/test/screenshot/mdc-button/classes/baseline.html b/test/screenshot/mdc-button/classes/baseline.html
index 35c38dd1ecb..2faa55819bc 100644
--- a/test/screenshot/mdc-button/classes/baseline.html
+++ b/test/screenshot/mdc-button/classes/baseline.html
@@ -37,13 +37,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -52,13 +52,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -78,13 +78,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--raised">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--raised">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -93,13 +93,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--raised" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--raised" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -119,13 +119,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--unelevated">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--unelevated">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -134,13 +134,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--unelevated" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--unelevated" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -160,13 +160,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--stroked">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--stroked">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -175,13 +175,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--stroked" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--stroked" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
diff --git a/test/screenshot/mdc-button/classes/dense.html b/test/screenshot/mdc-button/classes/dense.html
index 7a0b4d5646c..b6d719a3413 100644
--- a/test/screenshot/mdc-button/classes/dense.html
+++ b/test/screenshot/mdc-button/classes/dense.html
@@ -37,13 +37,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -52,13 +52,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -78,13 +78,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--raised">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -93,13 +93,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--raised" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -119,13 +119,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -134,13 +134,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--unelevated" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -160,13 +160,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--stroked">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--stroked">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -175,13 +175,13 @@
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--stroked" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="mdc-button mdc-button--dense mdc-button--stroked" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
diff --git a/test/screenshot/mdc-button/mixins/filled-accessible.html b/test/screenshot/mdc-button/mixins/filled-accessible.html
index 6e04c89d21d..99002fe2481 100644
--- a/test/screenshot/mdc-button/mixins/filled-accessible.html
+++ b/test/screenshot/mdc-button/mixins/filled-accessible.html
@@ -35,13 +35,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -50,13 +50,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--filled-accessible mdc-button mdc-button--raised" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
diff --git a/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html b/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html
index 60617c3034d..148cfe33f89 100644
--- a/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html
+++ b/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html
@@ -37,10 +37,10 @@
           <button class="custom-button--horizontal-padding mdc-button">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
       <p class="test-row">
@@ -54,10 +54,10 @@
           <button class="custom-button--horizontal-padding mdc-button mdc-button--raised">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--raised" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
       <p class="test-row">
@@ -71,10 +71,10 @@
           <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--unelevated" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
       <p class="test-row">
@@ -88,10 +88,10 @@
           <button class="custom-button--horizontal-padding mdc-button mdc-button--stroked">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--stroked"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--stroked"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--stroked" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--stroked" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
     </main>
diff --git a/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html b/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html
index 7da90b02db9..979fddd1ff9 100644
--- a/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html
+++ b/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html
@@ -37,10 +37,10 @@
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
       <p class="test-row">
@@ -54,10 +54,10 @@
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--raised" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
       <p class="test-row">
@@ -71,10 +71,10 @@
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--unelevated" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
       <p class="test-row">
@@ -88,10 +88,10 @@
           <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--stroked">是</button> <!-- Short label text to test min-width -->
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--stroked"><i class="material-icons mdc-button__icon">favorite</i> Icon</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--stroked"><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Icon</button>
         </span>
         <span class="test-cell">
-          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--stroked" disabled><i class="material-icons mdc-button__icon">favorite</i> Disabled</button>
+          <button class="custom-button--horizontal-padding mdc-button mdc-button--dense mdc-button--stroked" disabled><i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i> Disabled</button>
         </span>
       </p>
     </main>
diff --git a/test/screenshot/mdc-button/mixins/icon-color.html b/test/screenshot/mdc-button/mixins/icon-color.html
index b6ceafa6801..fdaf6e3ee88 100644
--- a/test/screenshot/mdc-button/mixins/icon-color.html
+++ b/test/screenshot/mdc-button/mixins/icon-color.html
@@ -29,13 +29,13 @@
       <p class="test-row">
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -44,13 +44,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -61,13 +61,13 @@
       <p class="test-row">
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -76,13 +76,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--icon-color mdc-button mdc-button--raised" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
diff --git a/test/screenshot/mdc-button/mixins/ink-color.html b/test/screenshot/mdc-button/mixins/ink-color.html
index 139e7becde0..6387a0c7063 100644
--- a/test/screenshot/mdc-button/mixins/ink-color.html
+++ b/test/screenshot/mdc-button/mixins/ink-color.html
@@ -35,13 +35,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -50,13 +50,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -73,13 +73,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -88,13 +88,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--ink-color mdc-button mdc-button--raised" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
diff --git a/test/screenshot/mdc-button/mixins/stroke-width.html b/test/screenshot/mdc-button/mixins/stroke-width.html
index 7579c15cff5..236187e96c8 100644
--- a/test/screenshot/mdc-button/mixins/stroke-width.html
+++ b/test/screenshot/mdc-button/mixins/stroke-width.html
@@ -35,13 +35,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -50,13 +50,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -73,13 +73,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked mdc-button--dense">
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked mdc-button--dense">
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>
@@ -88,13 +88,13 @@
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked mdc-button--dense" disabled>
-            <i class="material-icons mdc-button__icon">favorite</i>
+            <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
             Font Icon
           </button>
         </span>
         <span class="test-cell">
           <button class="custom-button custom-button--stroke-width mdc-button mdc-button--stroked mdc-button--dense" disabled>
-            <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+            <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
               <path fill="none" d="M0 0h24v24H0z"/>
               <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
             </svg>