feat(chips): Customize icon size and color

packages/mdc-chips/README.md

@@ -160,14 +160,18 @@ Mixin | Description
 --- | ---
 `mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set
 `mdc-chip-corner-radius($radius)` | Customizes the corner radius for a chip
-`mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink and ripple color to meet accessibility standards
+`mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink, icon and ripple colors to meet accessibility standards
 `mdc-chip-fill-color($color)` | Customizes the background fill color for a chip
 `mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match
 `mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state
 `mdc-chip-stroke($width, $style, $color)` | Customizes the border stroke properties for a chip
 `mdc-chip-stroke-width($width)` | Customizes the border stroke width for a chip
 `mdc-chip-stroke-style($style)` | Customizes the border stroke style for a chip
 `mdc-chip-stroke-color($color)` | Customizes the border stroke color for a chip
+`mdc-chip-leading-icon-color($color, $opacity)` | Customizes the color of a leading icon in a chip, optionally customizes opacity
+`mdc-chip-trailing-icon-color($color, $opacity, $hover-opacity, $focus-opacity)` | Customizes the color of a trailing icon in a chip, optionally customizes regular/hover/focus opacities
+`mdc-chip-leading-icon-size($size)` | Customizes the size of a leading icon in a chip
+`mdc-chip-trailing-icon-color($size)` | Customizes the size of a trailing icon in a chip
 
 > _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.
 

packages/mdc-chips/_mixins.scss

@@ -30,9 +30,13 @@
   @if ($fill-tone == "dark") {
     @include mdc-chip-ink-color(text-primary-on-dark);
     @include mdc-chip-selected-ink-color(text-primary-on-dark);
+    @include mdc-chip-leading-icon-color(text-primary-on-dark);
+    @include mdc-chip-trailing-icon-color(text-primary-on-dark);
   } @else {
     @include mdc-chip-ink-color(text-primary-on-light);
     @include mdc-chip-selected-ink-color(text-primary-on-light);
+    @include mdc-chip-leading-icon-color(text-primary-on-light);
+    @include mdc-chip-trailing-icon-color(text-primary-on-light);
   }
 }
 
@@ -97,3 +101,49 @@
     margin: $gap-size / 2;
   }
 }
+
+// For customizing icon styles, we need to increase specifity to ensure
+// overrides apply. Styles defined in the .material-icons CSS class are
+// loaded separately, so the order of CSS definitions is not guaranteed.
+
+@mixin mdc-chip-leading-icon-color($color, $opacity: $mdc-chip-icon-opacity) {
+  .mdc-chip__icon.mdc-chip__icon--leading {
+    color: rgba(mdc-theme-prop-value($color), $opacity);
+  }
+}
+
+@mixin mdc-chip-trailing-icon-color(
+  $color,
+  $opacity: $mdc-chip-icon-opacity,
+  $hover-opacity: $mdc-chip-trailing-icon-hover-opacity,
+  $focus-opacity: $mdc-chip-trailing-icon-focus-opacity) {
+  .mdc-chip__icon.mdc-chip__icon--trailing {
+    color: rgba(mdc-theme-prop-value($color), $opacity);
+
+    &:hover {
+      color: rgba(mdc-theme-prop-value($color), $hover-opacity);
+    }
+
+    &:focus {
+      color: rgba(mdc-theme-prop-value($color), $focus-opacity);
+    }
+  }
+}
+
+@mixin mdc-chip-leading-icon-size($size) {
+  .mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
+    @include mdc-chip-icon-size_($size);
+  }
+}
+
+@mixin mdc-chip-trailing-icon-size($size) {
+  .mdc-chip__icon.mdc-chip__icon--trailing {
+    @include mdc-chip-icon-size_($size);
+  }
+}
+
+@mixin mdc-chip-icon-size_($size) {
+  width: $size;
+  height: $size;
+  font-size: $size;
+}

packages/mdc-chips/_variables.scss

@@ -22,10 +22,12 @@ $mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87);
 $mdc-chip-horizontal-padding: 12px;
 $mdc-chip-vertical-padding: 7px;
 
-$mdc-chip-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
+$mdc-chip-icon-color: mdc-theme-prop-value(on-surface);
+$mdc-chip-icon-opacity: .54;
+$mdc-chip-trailing-icon-hover-opacity: .62;
+$mdc-chip-trailing-icon-focus-opacity: .87;
+$mdc-chip-leading-icon-size: 20px;
 $mdc-chip-trailing-icon-size: 18px;
-$mdc-chip-trailing-icon-hover-color: rgba(mdc-theme-prop-value(on-surface), .62);
-$mdc-chip-trailing-icon-focus-color: rgba(mdc-theme-prop-value(on-surface), .87);
 
 $mdc-chip-checkmark-animation-delay: 50ms;
 $mdc-chip-checkmark-animation-duration: 150ms;

packages/mdc-chips/chip/mdc-chip.scss

@@ -31,6 +31,10 @@
   @include mdc-chip-fill-color($mdc-chip-fill-color-default);
   @include mdc-chip-ink-color($mdc-chip-ink-color-default);
   @include mdc-chip-selected-ink-color(primary);
+  @include mdc-chip-leading-icon-color($mdc-chip-icon-color);
+  @include mdc-chip-trailing-icon-color($mdc-chip-icon-color);
+  @include mdc-chip-leading-icon-size($mdc-chip-leading-icon-size);
+  @include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size);
   @include mdc-typography(body2);
 
   display: inline-flex;
@@ -67,34 +71,16 @@
 .mdc-chip__icon {
   border-radius: 50%;
   outline: none;
-  color: $mdc-chip-icon-color;
   vertical-align: middle;
 }
 
 .mdc-chip__icon--trailing {
   margin: 0 -4px 0 4px;
-
-  &:hover {
-    color: $mdc-chip-trailing-icon-hover-color;
-  }
-
-  &:focus {
-    color: $mdc-chip-trailing-icon-focus-color;
-  }
-}
-
-// This overrides styles defined in the .material-icons CSS class
-// which is loaded separately, so the order of CSS definitions is not
-// guaranteed. Therefore, increase specifity to ensure overrides apply.
-.mdc-chip__icon.mdc-chip__icon--trailing {
-  width: $mdc-chip-trailing-icon-size;
-  height: $mdc-chip-trailing-icon-size;
-  font-size: $mdc-chip-trailing-icon-size;
 }
 
 .mdc-chip__checkmark,
 .mdc-chip__icon--leading {
-  height: 24px;
+  height: $mdc-chip-leading-icon-size;
   margin: -4px 4px -4px -4px;
 }
 
@@ -118,12 +104,12 @@
 
 .mdc-chip__checkmark-svg {
   width: 0;
-  height: 24px;
+  height: $mdc-chip-leading-icon-size;
   transition: width $mdc-chip-width-animation-duration $mdc-animation-standard-curve-timing-function;
 }
 
 .mdc-chip--selected .mdc-chip__checkmark-svg {
-  width: 24px;
+  width: $mdc-chip-leading-icon-size;
 }
 
 // Add leading checkmark to filter chips with a leading icon
@@ -159,6 +145,6 @@
   opacity: 0;
 
   + .mdc-chip__checkmark {
-    width: 24px;
+    width: $mdc-chip-leading-icon-size;
   }
 }