Angular Material How to disable an svg icon

user_1472806 0
Viewed 7122

Similar to the classic bootstrap disabled state -

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

I'd like to simulate a disabled state on an Angular Materials svg icon using cursor: not-allowed css. But I want to disable the click event.

.toolbar-icon-disabled {
    fill: gray;
    cursor: not-allowed;
    pointer-events: none;
  }
  <mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon>

Problem here is that I CANNOT use both not-allowed and pointer-events: none, as they appear to be mutually exclusive.

ex/ Here you can see that my left-most icon appears disabled, as the fill color is gray; however, it's still clickable if I add cursor: not-allowed.

left icon disabled

I couldn't copy/paste the not-allowed circle from my screen, but here's an example:

enter image description here

angular-material svg css
1 Answers

Suggested work around: 1) Put the mat-icon in another anchor tag and add curson not allowed to that anchor. HTML:

<a [class.linkDisabled]="true"><mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon></a>

CSS:

.toolbar-icon-disabled {pointer-events: none;}
.linkDisabled {cursor: not-allowed;}

2) keep the 'cursor: not-allowed;' in the css and i am assuming that there will be an event listener on the icon to do some action. Go into that method, check for the disabled condition and return if true. For example:

html:

<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="flgDisabled" (click)="onClick()"></mat-icon>

method:

  onClick() {
    if(this.flgDisabled) {
      return
    }
    console.log('called');
  }
user_68951060
Related