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

Question

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

Amer · Accepted Answer · 2021-09-05 21:38:29Z

3

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>

edited Sep 5, 2021 at 21:38

answered Sep 5, 2021 at 20:52

Amer

6,7442 gold badges11 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rajiv Kumar Over a year ago

and how would that be based on condition ? I only want to change the color icon of the button if condition is true

Amer Over a year ago

I updated my answer to include a condition.

Rajiv Kumar Over a year ago

how do I insert this condition isDisabled && action.name === 'For Approval'

Amer Over a year ago

Check it now, please.

Rajiv Kumar Over a year ago

I am using the class with the color , imgur.com/a/t2iic01 , it is possible that we add the color on the json config ?

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related