How to make mat-icon disabled in angular?

Question

Here i have multiple mat-icons, delete named mat-icon i want to make disabled i use disabled properties on this but it gives error like(Can't bind to 'disabled' since it isn't a known property of 'mat-icon') so how to show particular mat-icon disabled in angular 6?

<mat-icon color="warn" style="cursor: pointer;" [disabled]="payloadArray.enabled != 'true' ">delete</mat-icon>
<mat-icon color="warn" style="cursor: pointer;">person_add</mat-icon>

Answer 1

Use mat-icon inside button tag and then you can use disabled

Try this,

<button mat-icon-button [disabled]="payloadArray.enabled != 'true' " color="primary" >
   <mat-icon color="warn" style="cursor: pointer;" >delete</mat-icon>
</button>

Answer 2

Use ngClass directive to add disable

<mat-icon color="warn" [ngClass]="{'disable':payloadArray.enabled !== true}"(click)="onClick()">delete</mat-icon>

Example:https://stackblitz.com/edit/angular-4jdvc9