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`
material-components · Oct 12, 2017 · 36577ab · 36577ab
1 parent cc7538f
commit 36577ab
Show file tree

Hide file tree

Showing 39 changed files with 45 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {