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;