Material chip color not working when I set it

Question

I am using angular material 8.2.3 and when I try to set chip color chip is still greyed

<mat-chip-list>
    <mat-chip color="accent" removable (removed)="removeFilter()">
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

I have tried all colors (warn, primary etc..) but still color of the chip remains grey. Does anyone know why?

Answer 1

Apparently, the color is only applied to mat-chip once it's selected.

To mark the mat-chip as selected, you need to give it a selected attribute.

Here, give this a try:

<mat-chip-list>
    <mat-chip selected color="accent" removable (removed)="removeFilter()">
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

Here's a Sample Demo for your ref.