How to change angular mat icon button color based on condition?

Issue

How to change angular button color based on condition ? , this is a mat icon button

#code

<div class="flex">
  <button mat-icon-button *ngFor="let action of actions" 
    [disabled]="isDisabled && action.name === 'For Approval'" matTooltip="{{action.name}}"
    (click)="clickActionBtn(action.name)">
    <mat-icon style="font-size: 20px;" class="{{action.class}}">
      {{action.icon}}
    </mat-icon>
  </button>

I tried , but it does not work

[class.gray]="isDisabled

Solution

Angular Material mat-icon takes color as an input (with primary, accent, and warn options based on your material theme colors) to define the color of the icon, so you need to use this input to change it, like the following:

<!-- `color` input allowed options are: `primary`, `accent`, and `warn` only. -->
<mat-icon [color]="isDisabled && action.name === 'For Approval' ? 'primary' : ''"></mat-icon>

So you can update your button HTML to be like the following:

<button
  mat-icon-button
  *ngFor="let action of actions"
  [disabled]="isDisabled && action.name === 'For Approval'"
  matTooltip="{{action.name}}"
  (click)="clickActionBtn(action.name)"
>
  <mat-icon
    style="font-size: 20px"
    [color]="isDisabled && action.name === 'For Approval' ? 'primary' : ''"
  >
    {{action.icon}}
  </mat-icon>
</button>

Answered By – Amer

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0