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

Author: devversion

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;