-
+
-
Chip One
+
-
Chip Two
+
-
+
Chip Three
+
Chip Four
Entry Chips
-
+
-
+
+
+ Add to Calendar
+
+ face
+
+ Jane Smith
+ more_vert
+
+ face
+
+ John Doe
+ more_vert
+ Choice Chips
+
+
+
+
+
+
+
- Extra Small
+
+
+
+
+
+ Small
+
+
+ Medium
+
+
+ Large
+
+
+ Extra Large
+ Filter Chips
+
+
+
+
+ Tops
+ cancel
+
+
+ Bottoms
+ cancel
+
+
+ Shoes
+ cancel
+
+
+ Accessories
+ cancel
+ Action Chips
+
+
+ wb_sunny
+
+ Turn on lights
+
+ bookmark
- Bookmark
-
Set Alarm
+
+ alarm
+
- Set alarm
-
@@ -73,30 +137,30 @@
Get Directions
+
+ directions
+
Get directions
Custom theme
-
+
-
Add to Calendar
+
-
Bookmark
+
-
Set Alarm
+
Get Directions
-
+
-
Add to Calendar
+
-
Bookmark
+
-
Set Alarm
+
diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
index 890d17b362f..c67892cb6aa 100644
--- a/packages/mdc-chips/README.md
+++ b/packages/mdc-chips/README.md
@@ -40,25 +40,52 @@ npm install --save @material/chips
```html
Get Directions
-
+
-
Chip content
+
-
Chip content
+
```
+#### Leading and Trailing Icons
+
+You can optionally add a leading icon (i.e. thumbnail) and/or a trailing icon to a chip. To add an icon, add an `i` element with your preferred icon, give it a class of `mdc-chip__icon`, and a class of either `mdc-chip__icon--leading` or `mdc-chip__icon--trailing`. If you're adding a trailing icon, also set `tabindex="0"` and `role="button"` to make it accessible by keyboard and screenreader.
+
+##### Leading icon
+
+```html
+Chip content
+ event
+
+```
+
+##### Trailing icon
+
+```html
+Add to calendar
+
+
+```
+
### CSS Classes
CSS Class | Description
--- | ---
+`mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to
`mdc-chip` | Mandatory.
-`mdc-chip__text` | Mandatory. Indicates the text content of the chip.
-`mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to.
+`mdc-chip__text` | Mandatory. Indicates the text content of the chip
+`mdc-chip__icon` | Optional. Indicates an icon in the chip
+`mdc-chip__icon--leading` | Optional. Indicates a leading icon in the chip
+`mdc-chip__icon--trailing` | Optional. Indicates a trailing icon in the chip
+
+> _NOTE_: Every element that has an `mdc-chip__icon` class must also have either the `mdc-chip__icon--leading` or `mdc-chip__icon--trailing` class.
### Sass Mixins
diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
index 9814b63c110..fdcbd0ef2b8 100644
--- a/packages/mdc-chips/_variables.scss
+++ b/packages/mdc-chips/_variables.scss
@@ -16,6 +16,10 @@
$mdc-chip-border-radius-default: 16px;
$mdc-chip-fill-color-default: rgba(black, .08);
-$mdc-chip-ink-color-default: rgba(black, .87);
$mdc-chip-horizontal-padding: 12px;
$mdc-chip-vertical-padding: 7px;
+
+$mdc-chip-icon-color: rgba(black, .54);
+$mdc-chip-trailing-icon-size: 18px;
+$mdc-chip-trailing-icon-hover-color: rgba(black, .62);
+$mdc-chip-trailing-icon-focus-color: rgba(black, .87);
diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
index e1c1f4c5083..69e4ab11a34 100644
--- a/packages/mdc-chips/chip/mdc-chip.scss
+++ b/packages/mdc-chips/chip/mdc-chip.scss
@@ -24,18 +24,51 @@
@include mdc-ripple-radius-bounded;
@include mdc-chip-corner-radius($mdc-chip-border-radius-default);
@include mdc-chip-fill-color($mdc-chip-fill-color-default);
- @include mdc-chip-ink-color($mdc-chip-ink-color-default);
+ @include mdc-chip-ink-color(text-primary-on-light);
- display: inline-block;
- margin: 5px;
+ display: inline-flex;
+ position: relative;
+ align-items: center;
+ margin: 4px;
padding: $mdc-chip-vertical-padding $mdc-chip-horizontal-padding;
cursor: pointer;
+ outline: none;
overflow: hidden;
}
.mdc-chip__text {
- display: inline-block;
- vertical-align: middle;
// Set line-height to be <18px to force the content height of mdc-chip to be 18px.
line-height: 17px;
}
+
+.mdc-chip__icon {
+ color: $mdc-chip-icon-color;
+ vertical-align: middle;
+ border-radius: 50%;
+ outline: none;
+}
+
+.mdc-chip__icon--leading {
+ margin: -4px 4px -4px -4px;
+}
+
+.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;
+}
Jane Smith
+ cancel
+