Css 角度材质如何禁用svg图标

与经典的引导禁用状态类似-

主按钮

我想使用

cursor:not allowed

css在

Angular Materials

svg图标上模拟

disabled

状态。但是我想禁用单击事件

。工具栏图标已禁用{
填充物：灰色；
光标：不允许；
指针事件：无；
}

建议的解决方法： 1） 将mat图标放在另一个锚点标记中，并将curson not allowed添加到该锚点。 HTML:

2） 保留“游标：不允许；”在css中，我假设图标上将有一个事件侦听器来执行某些操作。进入该方法，检查禁用条件，如果为true，则返回。例如：

html:

---

我们已经涵盖了点击事件；是的，我也有同样的想法，如果伤残的话，我会回来。但我想要的似乎是你建议的。我还想过将垫子图标包装在

标记中，但我从未想过将其单独设置样式。那是个好主意。我正在测试它。。。

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

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

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

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