From 7109def5efa227e84a3d2138d5440b8efeb025e1 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 20 Apr 2018 14:03:35 -0700
Subject: [PATCH 1/4] Make leading icon 20px and size customizable

---
 packages/mdc-chips/README.md          |  1 +
 packages/mdc-chips/_mixins.scss       |  6 ++++++
 packages/mdc-chips/_variables.scss    |  1 +
 packages/mdc-chips/chip/mdc-chip.scss | 16 +++++++++-------
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
index 917bc35b36a..e9d947bcf94 100644
--- a/packages/mdc-chips/README.md
+++ b/packages/mdc-chips/README.md
@@ -168,6 +168,7 @@ Mixin | Description
 `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-icon-size($size)` | Customizes the size of an 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.
 
diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
index 327ac1ca3ca..d76f0d220e3 100644
--- a/packages/mdc-chips/_mixins.scss
+++ b/packages/mdc-chips/_mixins.scss
@@ -97,3 +97,9 @@
     margin: $gap-size / 2;
   }
 }
+
+@mixin mdc-chip-icon-size($size) {
+  width: $size;
+  height: $size;
+  font-size: $size;
+}
diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
index da5dd428712..48877e4c6fc 100644
--- a/packages/mdc-chips/_variables.scss
+++ b/packages/mdc-chips/_variables.scss
@@ -23,6 +23,7 @@ $mdc-chip-horizontal-padding: 12px;
 $mdc-chip-vertical-padding: 7px;
 
 $mdc-chip-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
+$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);
diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
index 92bff46e913..3f642883acb 100644
--- a/packages/mdc-chips/chip/mdc-chip.scss
+++ b/packages/mdc-chips/chip/mdc-chip.scss
@@ -86,15 +86,17 @@
 // 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--leading {
+  @include mdc-chip-icon-size($mdc-chip-leading-icon-size);
+}
+
 .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;
+  @include mdc-chip-icon-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 +120,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 +161,6 @@
   opacity: 0;
 
   + .mdc-chip__checkmark {
-    width: 24px;
+    width: $mdc-chip-leading-icon-size;
   }
 }

From c1a9f1f09226409b019cfe7ddf50d94b26c4955d Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 20 Apr 2018 14:32:20 -0700
Subject: [PATCH 2/4] Customize color too

---
 packages/mdc-chips/_mixins.scss       | 30 ++++++++++++++++++++++++++-
 packages/mdc-chips/_variables.scss    |  2 +-
 packages/mdc-chips/chip/mdc-chip.scss | 16 ++++----------
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
index d76f0d220e3..e96f7a8ca02 100644
--- a/packages/mdc-chips/_mixins.scss
+++ b/packages/mdc-chips/_mixins.scss
@@ -98,7 +98,35 @@
   }
 }
 
-@mixin mdc-chip-icon-size($size) {
+// 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) {
+  .mdc-chip__icon.mdc-chip__icon--leading {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-chip-trailing-icon-color($color) {
+  .mdc-chip__icon.mdc-chip__icon--trailing {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-chip-leading-icon-size($size) {
+  .mdc-chip__icon.mdc-chip__icon--leading {
+    @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;
diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
index 48877e4c6fc..4c4785e62e0 100644
--- a/packages/mdc-chips/_variables.scss
+++ b/packages/mdc-chips/_variables.scss
@@ -22,9 +22,9 @@ $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-leading-icon-size: 20px;
 $mdc-chip-trailing-icon-size: 18px;
+$mdc-chip-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
 $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);
 
diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
index 3f642883acb..43a1de90d6c 100644
--- a/packages/mdc-chips/chip/mdc-chip.scss
+++ b/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-size($mdc-chip-leading-icon-size);
+  @include mdc-chip-leading-icon-color($mdc-chip-icon-color);
+  @include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size);
+  @include mdc-chip-trailing-icon-color($mdc-chip-icon-color);
   @include mdc-typography(body2);
 
   display: inline-flex;
@@ -67,7 +71,6 @@
 .mdc-chip__icon {
   border-radius: 50%;
   outline: none;
-  color: $mdc-chip-icon-color;
   vertical-align: middle;
 }
 
@@ -83,17 +86,6 @@
   }
 }
 
-// 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--leading {
-  @include mdc-chip-icon-size($mdc-chip-leading-icon-size);
-}
-
-.mdc-chip__icon.mdc-chip__icon--trailing {
-  @include mdc-chip-icon-size($mdc-chip-trailing-icon-size);
-}
-
 .mdc-chip__checkmark,
 .mdc-chip__icon--leading {
   height: $mdc-chip-leading-icon-size;

From 8f295da519ced919691f42aff9b90fa6f9eab3de Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 20 Apr 2018 14:52:36 -0700
Subject: [PATCH 3/4] Make leading and trailing icon customizable separate and
 fix accessible mixin

---
 packages/mdc-chips/README.md          |  7 +++++--
 packages/mdc-chips/_mixins.scss       | 26 +++++++++++++++++++++-----
 packages/mdc-chips/_variables.scss    |  7 ++++---
 packages/mdc-chips/chip/mdc-chip.scss | 12 ++----------
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
index e9d947bcf94..08cb3388f92 100644
--- a/packages/mdc-chips/README.md
+++ b/packages/mdc-chips/README.md
@@ -160,7 +160,7 @@ 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
@@ -168,7 +168,10 @@ Mixin | Description
 `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-icon-size($size)` | Customizes the size of an icon in 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.
 
diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
index e96f7a8ca02..d4df792b6cf 100644
--- a/packages/mdc-chips/_mixins.scss
+++ b/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);
   }
 }
 
@@ -102,20 +106,32 @@
 // 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) {
+@mixin mdc-chip-leading-icon-color($color, $opacity: $mdc-chip-icon-opacity) {
   .mdc-chip__icon.mdc-chip__icon--leading {
-    @include mdc-theme-prop(color, $color);
+    color: rgba(mdc-theme-prop-value($color), $opacity);
   }
 }
 
-@mixin mdc-chip-trailing-icon-color($color) {
+@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 {
-    @include mdc-theme-prop(color, $color);
+    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 {
+  .mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
     @include mdc-chip-icon-size_($size);
   }
 }
diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
index 4c4785e62e0..1ba26479cb0 100644
--- a/packages/mdc-chips/_variables.scss
+++ b/packages/mdc-chips/_variables.scss
@@ -22,11 +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: 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-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
-$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;
diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
index 43a1de90d6c..04928745a7f 100644
--- a/packages/mdc-chips/chip/mdc-chip.scss
+++ b/packages/mdc-chips/chip/mdc-chip.scss
@@ -31,10 +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-size($mdc-chip-leading-icon-size);
   @include mdc-chip-leading-icon-color($mdc-chip-icon-color);
-  @include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size);
   @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;
@@ -76,14 +76,6 @@
 
 .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;
-  }
 }
 
 .mdc-chip__checkmark,

From 1b6216d3ee4f28966287827979f83f39a37d1248 Mon Sep 17 00:00:00 2001
From: Bonnie Zhou <bonniez@google.com>
Date: Fri, 20 Apr 2018 15:52:55 -0700
Subject: [PATCH 4/4] Fix typo

---
 packages/mdc-chips/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
index 08cb3388f92..ac03a47fb9c 100644
--- a/packages/mdc-chips/README.md
+++ b/packages/mdc-chips/README.md
@@ -171,7 +171,7 @@ Mixin | Description
 `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
+`mdc-chip-trailing-icon-size($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.