Angular custom mat chip color

Issue

Is there any way to make the mat chip to have custom color other than the primary, accent, warn and default? This is my code now

 <mat-chip *ngIf="status.name==='open'" color="warn" selected trans>{{status.display_name}}</mat-chip>
                <mat-chip *ngIf="status.name==='pending'" color="accent" selected trans>{{status.display_name}}</mat-chip>
                <mat-chip *ngIf="status.name==='assigned'" color="primary" selected trans>{{status.display_name}}</mat-chip>
                <mat-chip *ngIf="status.name==='verification'" color="yellow" selected trans>{{status.display_name}}</mat-chip>

And yeah it's pretty obvious i want the last mat-chip to have a yellow color to it. the color='primary' is black now and i want to change it to be green but i have no idea how to. Any help would be appreciated.

Solution

You need to add CSS class instead of color="primary" Create you own CSS class

.assigned-chip{
     background-color: <<color code>> // as per your requirement
}

<mat-chip *ngIf="status.name==='assigned'" class="assigned-chip">{{status.display_name}}</mat-chip>

Answered By - KEVAL PANCHAL