fix(toolbar): Fix colors for svg icons. Update custom-toolbar demo (#2331)

SVG icons in the toolbar will now use the same color as the font icons.

Author: williamernest

demos/toolbar/custom-toolbar.html

@@ -36,7 +36,9 @@
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
           <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Download" alt="Download">file_download</a>
           <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Print this page" alt="Print this page">print</a>
-          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+          <a href="#" class="mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Open in new window" alt="Open in new window">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="a" d="M-240.34-413.17c-18.22 0-33 15.15-33 33.84 0 14.95 9.45 27.63 22.57 32.11 1.65.31 2.25-.74 2.25-1.63 0-.8-.03-2.93-.04-5.75-9.18 2.04-11.12-4.54-11.12-4.54-1.5-3.91-3.66-4.95-3.66-4.95-3-2.1.23-2.06.23-2.06 3.31.24 5.05 3.49 5.05 3.49 2.94 5.17 7.72 3.68 9.6 2.81.3-2.19 1.15-3.68 2.09-4.52-7.33-.85-15.03-3.76-15.03-16.72 0-3.69 1.29-6.71 3.4-9.08-.34-.86-1.47-4.3.32-8.95 0 0 2.77-.91 9.08 3.47 2.63-.75 5.46-1.13 8.26-1.14 2.8.01 5.63.39 8.26 1.14 6.3-4.38 9.07-3.47 9.07-3.47 1.8 4.66.67 8.1.33 8.95 2.11 2.37 3.39 5.39 3.39 9.08 0 13-7.72 15.86-15.07 16.7 1.19 1.04 2.24 3.11 2.24 6.27 0 4.52-.04 8.17-.04 9.28 0 .91.59 1.96 2.27 1.63 13.1-4.48 22.55-17.16 22.55-32.1.01-18.71-14.77-33.86-33-33.86"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><g clip-path="url(#b)"><defs><path id="c" d="M-1121.33-2867.17h1680v3369h-1680z"/></defs><clipPath id="d"><use xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" d="M-278.33-418.17h76v76h-76z"/></g><path d="M2 2v20h20V2H2zm2 18V4h16v16H4z"/><path d="M11 5v8h8V5h-8z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+          </a>
         </section>
       </div>
     </header>

demos/toolbar/toolbar.scss

@@ -54,14 +54,14 @@
 
 .demo-toolbar--custom {
   @include mdc-toolbar-fill-color-accessible($material-color-red-900);
-}
 
-.demo-toolbar__menu-icon--custom,
-.demo-toolbar__icon--custom {
-  @include mdc-toolbar-icon-ink-color($material-color-red-100);
+  .demo-toolbar__menu-icon--custom,
+  .demo-toolbar__icon--custom {
+    @include mdc-toolbar-icon-ink-color($material-color-red-100);
 
-  &:hover {
-    @include mdc-toolbar-icon-ink-color(white);
+    &:hover {
+      @include mdc-toolbar-icon-ink-color(white);
+    }
   }
 }
 

packages/mdc-toolbar/README.md

@@ -141,6 +141,14 @@ Icons can be added as anchor tags, `span`s, or `button`s to `mdc-toolbar`. There
 `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`.
 
+When using `svg` icons, ensure you wrap the `svg` element in an `a` and include the `mdc-toolbar__icon` class.
+
+```html
+<a href="#" class="mdc-toolbar__icon">
+  <svg></svg>
+</a>
+```
+
 ### Fixed toolbars
 
 By default, toolbars scroll with the page content. To keep the toolbar fixed to

packages/mdc-toolbar/_mixins.scss

@@ -66,6 +66,7 @@
   border: none;
   outline: none;
   background-color: transparent;
+  fill: currentColor;
   color: inherit;
   text-decoration: none;
   cursor: pointer;