13

When i try to style my md-chips with the color attribute nothing happens. According to the guide https://material.angular.io/components/component/chips this has to work. All my other elements style without problems.

<md-chip-list>
    <md-chip color="primary"> Chicken </md-chip>
    <md-chip color="warn"> Table </md-chip>
    <md-chip color="accent"> Tree </md-chip>
    <md-chip> Eight </md-chip>
</md-chip-list>

Result:enter image description here

Does anybody know how to fix this?

Thanks in advance!

Sephen
  • 1,111
  • 3
  • 16
  • 38

3 Answers3

29

According to the plunkr example, the chips are only colored when the selected attribute is set to true : 

<md-chip color="accent" selected="true">Chicken</md-chip>
Riron
  • 1,023
  • 14
  • 18
7

You can set the md-chip color dynamically by using ngStyle

<md-chip-list>
 <md-chip *ngFor="let item of itemList" [ngStyle]="{ backgroundColor: item.color }">
{{ item.name }}
</md-chip>
</md-chip-list>
Kriti
  • 2,163
  • 15
  • 16
3

Right now (24 Sep 2017), this is not working. Even on the example in the docs isn't working

enter image description here

I was forced to use a CSS property:

<md-chip color="primary" [selected]="true" style="background-color: #986f37">Content here</md-chip>
Mike Axle
  • 1,086
  • 11
  • 25