Click still running side effects on disabled button

Question

I'm using mat-icon for buttons, and I want to disable some of them:

<button mat-button [disabled]="disabledCondition()">
  <mat-icon [routerLink]="['./settings']">
            settings
  </mat-icon>
</button>

my problem is disabled property is set, also styles are set, but if I click the mat-icon routerLink works.

Why is not disabled?

Answer 1

What you want to do is use the mat-icon-button and place your routerlink on the button

<button mat-icon-button [disabled]="true" [routerLink]="['settings']">
  <mat-icon >settings</mat-icon>
</button>