From 36577ab7a3236553769a6aa3766213e44847ecf6 Mon Sep 17 00:00:00 2001
From: Thanik Bhongbhibhat <bhongbhibhat@gmail.com>
Date: Thu, 12 Oct 2017 11:24:00 -0700
Subject: [PATCH]  fix(toolbar): update menu-icon className (#992) (#1373)

update menu-icon className from `.mdc-toolbar__icon--menu` to `.mdc-toolbar__menu-icon` in demos and docs

BREAKING CHANGE: Please update `mdc-toolbar__icon--menu` to `mdc-toolbar__menu-icon`
---
 demos/button.html                                 | 2 +-
 demos/card.html                                   | 2 +-
 demos/checkbox.html                               | 2 +-
 demos/dialog.html                                 | 2 +-
 demos/drawer/permanent-drawer-above-toolbar.html  | 2 +-
 demos/drawer/permanent-drawer-below-toolbar.html  | 2 +-
 demos/drawer/persistent-drawer.html               | 2 +-
 demos/drawer/temporary-drawer.html                | 2 +-
 demos/elevation.html                              | 2 +-
 demos/fab.html                                    | 2 +-
 demos/grid-list.html                              | 2 +-
 demos/icon-toggle.html                            | 2 +-
 demos/index.html                                  | 2 +-
 demos/layout-grid.html                            | 2 +-
 demos/linear-progress.html                        | 2 +-
 demos/list.html                                   | 2 +-
 demos/radio.html                                  | 2 +-
 demos/ripple.html                                 | 2 +-
 demos/select.html                                 | 2 +-
 demos/simple-menu.html                            | 2 +-
 demos/slider.html                                 | 2 +-
 demos/snackbar.html                               | 2 +-
 demos/switch.html                                 | 2 +-
 demos/tabs.html                                   | 2 +-
 demos/textfield.html                              | 2 +-
 demos/theme.html                                  | 2 +-
 demos/theme/index.html                            | 2 +-
 demos/toolbar/default-flexible-toolbar.html       | 2 +-
 demos/toolbar/default-toolbar.html                | 2 +-
 demos/toolbar/fixed-toolbar.html                  | 2 +-
 demos/toolbar/index.html                          | 4 ++--
 demos/toolbar/menu-toolbar.html                   | 2 +-
 demos/toolbar/waterfall-flexible-toolbar.html     | 2 +-
 demos/toolbar/waterfall-toolbar-fix-last-row.html | 2 +-
 demos/toolbar/waterfall-toolbar.html              | 2 +-
 demos/typography.html                             | 2 +-
 packages/mdc-toolbar/README.md                    | 6 +++---
 packages/mdc-toolbar/_mixins.scss                 | 2 +-
 packages/mdc-toolbar/mdc-toolbar.scss             | 8 ++++----
 39 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/demos/button.html b/demos/button.html
index 72461c40d40..d381b71c525 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -83,7 +83,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Buttons</span>
         </section>
diff --git a/demos/card.html b/demos/card.html
index 940b2207056..146147fd257 100644
--- a/demos/card.html
+++ b/demos/card.html
@@ -121,7 +121,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Card</span>
         </section>
diff --git a/demos/checkbox.html b/demos/checkbox.html
index d414ef9b497..7c875e46eb3 100644
--- a/demos/checkbox.html
+++ b/demos/checkbox.html
@@ -58,7 +58,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Checkbox</span>
         </section>
diff --git a/demos/dialog.html b/demos/dialog.html
index 6449645640d..803749dab0f 100644
--- a/demos/dialog.html
+++ b/demos/dialog.html
@@ -64,7 +64,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Dialog</span>
         </section>
diff --git a/demos/drawer/permanent-drawer-above-toolbar.html b/demos/drawer/permanent-drawer-above-toolbar.html
index 71cc0750fc4..595701a8726 100644
--- a/demos/drawer/permanent-drawer-above-toolbar.html
+++ b/demos/drawer/permanent-drawer-above-toolbar.html
@@ -112,7 +112,7 @@
         <div class="mdc-toolbar__row">
           <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
             <span class="catalog-back">
-              <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+              <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
             </span>
             <span class="mdc-toolbar__title catalog-title">Permanent Drawer Above Toolbar</span>
           </section>
diff --git a/demos/drawer/permanent-drawer-below-toolbar.html b/demos/drawer/permanent-drawer-below-toolbar.html
index d42eecf63eb..482be09ae10 100644
--- a/demos/drawer/permanent-drawer-below-toolbar.html
+++ b/demos/drawer/permanent-drawer-below-toolbar.html
@@ -70,7 +70,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Permanent Drawer Below Toolbar</span>
         </section>
diff --git a/demos/drawer/persistent-drawer.html b/demos/drawer/persistent-drawer.html
index 3f6d3a9ac25..3f9c534ec5f 100644
--- a/demos/drawer/persistent-drawer.html
+++ b/demos/drawer/persistent-drawer.html
@@ -95,7 +95,7 @@
       <header class="mdc-toolbar mdc-elevation--z4">
         <div class="mdc-toolbar__row">
           <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-            <button class="demo-menu material-icons mdc-toolbar__icon--menu">menu</button>
+            <button class="demo-menu material-icons mdc-toolbar__menu-icon">menu</button>
             <span class="mdc-toolbar__title catalog-title">Persistent Drawer</span>
           </section>
         </div>
diff --git a/demos/drawer/temporary-drawer.html b/demos/drawer/temporary-drawer.html
index 77a78d7217d..96cb4583306 100644
--- a/demos/drawer/temporary-drawer.html
+++ b/demos/drawer/temporary-drawer.html
@@ -41,7 +41,7 @@
     <div class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <button class="demo-menu material-icons mdc-toolbar__icon--menu">menu</button>
+          <button class="demo-menu material-icons mdc-toolbar__menu-icon">menu</button>
           <span class="mdc-toolbar__title catalog-title">Temporary Drawer</span>
         </section>
       </div>
diff --git a/demos/elevation.html b/demos/elevation.html
index c0d5c49ae7f..4191308adee 100644
--- a/demos/elevation.html
+++ b/demos/elevation.html
@@ -69,7 +69,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Elevation</span>
         </section>
diff --git a/demos/fab.html b/demos/fab.html
index d55bd3fa453..188737809b8 100644
--- a/demos/fab.html
+++ b/demos/fab.html
@@ -95,7 +95,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Floating Action Button</span>
         </section>
diff --git a/demos/grid-list.html b/demos/grid-list.html
index 084ef0d5c9c..80063c7bd5b 100644
--- a/demos/grid-list.html
+++ b/demos/grid-list.html
@@ -62,7 +62,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Grid List</span>
         </section>
diff --git a/demos/icon-toggle.html b/demos/icon-toggle.html
index c4f410fe616..0f5fed9e80f 100644
--- a/demos/icon-toggle.html
+++ b/demos/icon-toggle.html
@@ -108,7 +108,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Icon Toggle</span>
         </section>
diff --git a/demos/index.html b/demos/index.html
index 037d9754479..515201b00e4 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -28,7 +28,7 @@
     <header class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <span class="catalog-logo mdc-toolbar__icon--menu">
+          <span class="catalog-logo mdc-toolbar__menu-icon">
             <img src="/images/ic_component_24px_white.svg">
           </span>
           <span class="mdc-toolbar__title catalog-title">Material Components Catalog</span>
diff --git a/demos/layout-grid.html b/demos/layout-grid.html
index 0c646940bb7..82150cebcc2 100644
--- a/demos/layout-grid.html
+++ b/demos/layout-grid.html
@@ -123,7 +123,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Layout Grid</span>
         </section>
diff --git a/demos/linear-progress.html b/demos/linear-progress.html
index 3c4d9c14657..3bbdc81c580 100644
--- a/demos/linear-progress.html
+++ b/demos/linear-progress.html
@@ -51,7 +51,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Linear Progress Indicators</span>
         </section>
diff --git a/demos/list.html b/demos/list.html
index 0411b84e279..0a049af5b98 100644
--- a/demos/list.html
+++ b/demos/list.html
@@ -116,7 +116,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">List</span>
         </section>
diff --git a/demos/radio.html b/demos/radio.html
index df32ce29a9e..526d565c567 100644
--- a/demos/radio.html
+++ b/demos/radio.html
@@ -56,7 +56,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Radio</span>
         </section>
diff --git a/demos/ripple.html b/demos/ripple.html
index 4ae55763bc6..aa88251ad74 100644
--- a/demos/ripple.html
+++ b/demos/ripple.html
@@ -121,7 +121,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Ripple</span>
         </section>
diff --git a/demos/select.html b/demos/select.html
index 2dd60873931..79ada3ba647 100644
--- a/demos/select.html
+++ b/demos/select.html
@@ -54,7 +54,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Select</span>
         </section>
diff --git a/demos/simple-menu.html b/demos/simple-menu.html
index 1d75735b296..f4459b4de88 100644
--- a/demos/simple-menu.html
+++ b/demos/simple-menu.html
@@ -72,7 +72,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Simple Menu</span>
         </section>
diff --git a/demos/slider.html b/demos/slider.html
index 5c1181d6eab..120bcb7065f 100644
--- a/demos/slider.html
+++ b/demos/slider.html
@@ -58,7 +58,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Slider</span>
         </section>
diff --git a/demos/snackbar.html b/demos/snackbar.html
index ea80a67d5a7..b5fb635c251 100644
--- a/demos/snackbar.html
+++ b/demos/snackbar.html
@@ -61,7 +61,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Snackbar</span>
         </section>
diff --git a/demos/switch.html b/demos/switch.html
index 7a91cdd1a43..3b7d63635c5 100644
--- a/demos/switch.html
+++ b/demos/switch.html
@@ -63,7 +63,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Switch</span>
         </section>
diff --git a/demos/tabs.html b/demos/tabs.html
index 435d0b43dd3..48c43d6e1f5 100644
--- a/demos/tabs.html
+++ b/demos/tabs.html
@@ -151,7 +151,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Tabs</span>
         </section>
diff --git a/demos/textfield.html b/demos/textfield.html
index 9e191c729d7..6ead9b105a1 100644
--- a/demos/textfield.html
+++ b/demos/textfield.html
@@ -64,7 +64,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Text Field</span>
         </section>
diff --git a/demos/theme.html b/demos/theme.html
index 7b8c3a154d1..1a6c6ee4c5a 100644
--- a/demos/theme.html
+++ b/demos/theme.html
@@ -98,7 +98,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Theme</span>
         </section>
diff --git a/demos/theme/index.html b/demos/theme/index.html
index 46fb9b27104..8b7437d8540 100644
--- a/demos/theme/index.html
+++ b/demos/theme/index.html
@@ -29,7 +29,7 @@
     <header class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <button class="material-icons mdc-toolbar__icon--menu demo-drawer-toggle">menu</button>
+          <button class="material-icons mdc-toolbar__menu-icon demo-drawer-toggle">menu</button>
           <span class="mdc-toolbar__title catalog-title">Color Theming</span>
         </section>
       </div>
diff --git a/demos/toolbar/default-flexible-toolbar.html b/demos/toolbar/default-flexible-toolbar.html
index 9cb4b59d444..a74997fe48e 100644
--- a/demos/toolbar/default-flexible-toolbar.html
+++ b/demos/toolbar/default-flexible-toolbar.html
@@ -56,7 +56,7 @@
     <header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+          <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
         </section>
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
diff --git a/demos/toolbar/default-toolbar.html b/demos/toolbar/default-toolbar.html
index 4fd03f7f75d..5e11330b9b3 100644
--- a/demos/toolbar/default-toolbar.html
+++ b/demos/toolbar/default-toolbar.html
@@ -43,7 +43,7 @@
     <header class="mdc-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+          <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
         </section>
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
diff --git a/demos/toolbar/fixed-toolbar.html b/demos/toolbar/fixed-toolbar.html
index 75a4999b3f7..37ecc40415a 100644
--- a/demos/toolbar/fixed-toolbar.html
+++ b/demos/toolbar/fixed-toolbar.html
@@ -43,7 +43,7 @@
     <header class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+          <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
         </section>
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html
index a54c9f8e3d4..fdbd524d043 100644
--- a/demos/toolbar/index.html
+++ b/demos/toolbar/index.html
@@ -79,7 +79,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Toolbar</span>
         </section>
@@ -91,7 +91,7 @@
           <header class="mdc-toolbar">
             <div class="mdc-toolbar__row">
               <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-                <i class="material-icons mdc-toolbar__icon--menu">menu</i>
+                <i class="material-icons mdc-toolbar__menu-icon">menu</i>
                 <span class="mdc-toolbar__title">Toolbar</span>
               </section>
               <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
diff --git a/demos/toolbar/menu-toolbar.html b/demos/toolbar/menu-toolbar.html
index 762fe24a27b..894e1254bd8 100644
--- a/demos/toolbar/menu-toolbar.html
+++ b/demos/toolbar/menu-toolbar.html
@@ -46,7 +46,7 @@
     <header class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+          <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
         </section>
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
diff --git a/demos/toolbar/waterfall-flexible-toolbar.html b/demos/toolbar/waterfall-flexible-toolbar.html
index c5aaa4bb598..8faeadc3cbc 100644
--- a/demos/toolbar/waterfall-flexible-toolbar.html
+++ b/demos/toolbar/waterfall-flexible-toolbar.html
@@ -56,7 +56,7 @@
     <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+          <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
         </section>
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
diff --git a/demos/toolbar/waterfall-toolbar-fix-last-row.html b/demos/toolbar/waterfall-toolbar-fix-last-row.html
index 66f13d4f21a..adc960d27c3 100644
--- a/demos/toolbar/waterfall-toolbar-fix-last-row.html
+++ b/demos/toolbar/waterfall-toolbar-fix-last-row.html
@@ -63,7 +63,7 @@
     <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--fixed-lastrow-only mdc-toolbar--waterfall mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+          <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
         </section>
       </div>
diff --git a/demos/toolbar/waterfall-toolbar.html b/demos/toolbar/waterfall-toolbar.html
index 946e11ce950..9fc915e43a1 100644
--- a/demos/toolbar/waterfall-toolbar.html
+++ b/demos/toolbar/waterfall-toolbar.html
@@ -43,7 +43,7 @@
     <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+          <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
         </section>
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
diff --git a/demos/typography.html b/demos/typography.html
index 17d2e20e3f8..98e7e0dcace 100644
--- a/demos/typography.html
+++ b/demos/typography.html
@@ -37,7 +37,7 @@
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <span class="catalog-back">
-            <a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
           <span class="mdc-toolbar__title catalog-title">Typography</span>
         </section>
diff --git a/packages/mdc-toolbar/README.md b/packages/mdc-toolbar/README.md
index b34f50add0a..f084353b3fc 100644
--- a/packages/mdc-toolbar/README.md
+++ b/packages/mdc-toolbar/README.md
@@ -58,7 +58,7 @@ Wrap the items with `mdc-toolbar` class in the following way:
 <header class="mdc-toolbar">
   <div class="mdc-toolbar__row">
     <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-      <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+      <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
       <span class="mdc-toolbar__title">Title</span>
     </section>
   </div>
@@ -71,7 +71,7 @@ MDC Toolbars can accommodate multiple rows using the wrapper `mdc-toolbar__row`:
 <header class="mdc-toolbar">
   <div class="mdc-toolbar__row">
     <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-      <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
+      <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
       <span class="mdc-toolbar__title">Title</span>
     </section>
   </div>
@@ -140,7 +140,7 @@ a page's title, or an application name.
 #### Toolbar Icons
 
 Icons can be added as anchor tags, `span`s, or `button`s to `mdc-toolbar`. There are two types of icons,
-`mdc-toolbar__icon--menu` represents the left most icon in `mdc-toolbar` usually to the left of `mdc-toolbar__title`.
+`mdc-toolbar__menu-icon` represents the left most icon in `mdc-toolbar` usually to the left of `mdc-toolbar__title`.
 `mdc-toolbar__icon` represents any icons placed on the right side of an `mdc-toolbar`.
 
 ### Fixed toolbars
diff --git a/packages/mdc-toolbar/_mixins.scss b/packages/mdc-toolbar/_mixins.scss
index f7d2507fed5..3de0d31e695 100644
--- a/packages/mdc-toolbar/_mixins.scss
+++ b/packages/mdc-toolbar/_mixins.scss
@@ -18,7 +18,7 @@
 
 /**
  * Applies styles to the different types of icons that can exist in toolbars.
- * Both .mdc-toolbar__icon and .mdc-toolbar__icon--menu share all styles except for
+ * Both .mdc-toolbar__icon and .mdc-toolbar__menu-icon share all styles except for
  * horizontal padding.
  */
 @mixin mdc-shared-icon-style() {
diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
index 7bff6de320e..7ffccc5e267 100644
--- a/packages/mdc-toolbar/mdc-toolbar.scss
+++ b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -98,7 +98,7 @@
     @include mdc-rtl-reflexive-property(padding, $mdc-toolbar-element-horizontal-padding-desktop / 2, $mdc-toolbar-element-horizontal-padding-desktop);
   }
 
-  &__icon--menu {
+  &__menu-icon {
     @include mdc-shared-icon-style;
     @include mdc-theme-prop(color, text-primary-on-primary);
 
@@ -108,7 +108,7 @@
   }
 }
 
-.mdc-toolbar__icon--menu + .mdc-toolbar__title {
+.mdc-toolbar__menu-icon + .mdc-toolbar__title {
   @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-title-margin-to-menu-icon-desktop);
 }
 
@@ -126,12 +126,12 @@
     @include mdc-rtl-reflexive-property(padding, $mdc-toolbar-element-horizontal-padding-mobile / 2, $mdc-toolbar-element-horizontal-padding-mobile);
   }
 
-  .mdc-toolbar__icon--menu {
+  .mdc-toolbar__menu-icon {
     padding-right: $mdc-toolbar-element-horizontal-padding-mobile;
     padding-left: $mdc-toolbar-element-horizontal-padding-mobile;
   }
 
-  .mdc-toolbar__icon--menu + .mdc-toolbar__title {
+  .mdc-toolbar__menu-icon + .mdc-toolbar__title {
     @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-title-margin-to-menu-icon-mobile);
   }
 }