Angular Material Как отключить значок SVG

Question

Аналогично классическому отключенному состоянию начальной загрузки -

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

Я хотел бы смоделировать состояние disabled на значке Angular Materials svg, используя cursor: not-allowed css.Но я хочу отключить событие click.

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

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

Проблема здесь в том, что я НЕ МОГУ использовать оба типа not-allowed и pointer-events: none, так как они кажутся взаимоисключающими.

ex /Здесь вы можете видеть, что мой самый левый значок кажется отключенным, так как цвет fill серый;тем не менее, он по-прежнему кликабелен, если я добавлю cursor: not-allowed.

Я не смог скопировать / вставить запрещенный круг со своего экрана, ноВот пример:

Answer 1

Предлагаемое решение: 1) Поместите значок циновки в другую метку привязки и добавьте курсор, запрещенный для этой привязки.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) оставьте курсор: недопустимым;в CSS, и я предполагаю, что на значке будет прослушиватель событий, чтобы выполнить какое-то действие.Перейдите к этому методу, проверьте наличие отключенного условия и верните, если оно истинно.Например:

html:

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

метод:

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