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 @@ 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;