fix(toolbar): apply accent color to ripple and icons in toolbar.

The toolbar won't apply the accent colors to the ripple and the md-icon.

Fixes #5341. Closes #5811.

  #breaking

src/components/toolbar/toolbar-theme.scss

@@ -4,12 +4,23 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
 
  md-icon {
  color: '{{primary-contrast}}';
+ fill: '{{primary-contrast}}';
  }
 
  &.md-accent {
  background-color: '{{accent-color}}';
  color: '{{accent-contrast}}';
+
+ .md-ink-ripple {
+ color: '{{accent-contrast}}';
+ }
+
+ md-icon {
+ color: '{{accent-contrast}}';
+ fill: '{{accent-contrast}}';
+ }
  }
+
  &.md-warn {
  background-color: '{{warn-color}}';
  color: '{{warn-contrast}}';

src/components/toolbar/toolbar.scss

@@ -30,6 +30,9 @@ md-toolbar {
  min-height: $baseline-grid * 8;
  width: 100%;
 
+ transition: $swift-ease-in-out;
+ transition-property: background-color, fill, color;
+
  &.md-whiteframe-z1-add, &.md-whiteframe-z1-remove {
  transition: box-shadow $swift-ease-in-out-duration linear;
  }
@@ -111,6 +114,11 @@ md-toolbar {
  .md-button {
  margin-top: 0;
  margin-bottom: 0;
+
+ &, &.md-icon-button md-icon {
+ transition: $swift-ease-in-out;
+ transition-property: background-color, fill, color;
+ }
  }
  &> .md-button:first-child {
  margin-left: $icon-button-margin-offset;