docs(button): Add aria-hidden="true" to icon elements (#2582)

Author: kfranqueiro

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>

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>
 ```

packages/mdc-button/README.md

@@ -55,17 +55,17 @@ 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>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </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