From 35a5cfc32ae57e8365f5e2fba19adb0dde3b0877 Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Tue, 6 Mar 2018 19:54:23 -0500
Subject: [PATCH] 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.
---
demos/toolbar/custom-toolbar.html | 4 +++-
demos/toolbar/toolbar.scss | 12 ++++++------
packages/mdc-toolbar/README.md | 8 ++++++++
packages/mdc-toolbar/_mixins.scss | 1 +
4 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/demos/toolbar/custom-toolbar.html b/demos/toolbar/custom-toolbar.html
index e3c3fe95327..5d966f1a5f5 100644
--- a/demos/toolbar/custom-toolbar.html
+++ b/demos/toolbar/custom-toolbar.html
@@ -36,7 +36,9 @@
file_downloadprint
- bookmark
+
+
+
diff --git a/demos/toolbar/toolbar.scss b/demos/toolbar/toolbar.scss
index 90780360330..c1dd256d056 100644
--- a/demos/toolbar/toolbar.scss
+++ b/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);
+ }
}
}
diff --git a/packages/mdc-toolbar/README.md b/packages/mdc-toolbar/README.md
index dad4e0d14ee..dbcf870c71d 100644
--- a/packages/mdc-toolbar/README.md
+++ b/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
+
+
+
+```
+
### Fixed toolbars
By default, toolbars scroll with the page content. To keep the toolbar fixed to
diff --git a/packages/mdc-toolbar/_mixins.scss b/packages/mdc-toolbar/_mixins.scss
index f2793c4b3e3..b38d56aa754 100644
--- a/packages/mdc-toolbar/_mixins.scss
+++ b/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;