Чтобы отключить mat-iconв Angular, вы можете использовать несколько подходов. Вот наиболее распространенные методы:

Метод 1. Использование CSS

1. Добавьте класс CSS в элемент mat-icon. Например, ....
2. Определите класс CSS в CSS вашего компонента или в файле глобальных стилей. Например:

   .disabled-icon {
   pointer-events: none;
   opacity: 0.5;
   }

   Этот класс CSS устанавливает для свойства pointer-eventsзначение none, что отключает взаимодействие указателя со значком и уменьшает непрозрачность, чтобы он визуально выглядел отключенным.

   p>

Метод 2: использование директив mat-icon-buttonили mat-buttonAngular Material

1. Замените элемент mat-iconна mat-icon-buttonили mat-button. Например:

   <button mat-icon-button [disabled]="true">
   <mat-icon>...</mat-icon>
   </button>

   или

   <button mat-button [disabled]="true">
   <mat-icon>...</mat-icon>
   </button>

   Использование атрибута disabledсо значением trueотключит кнопку и все дочерние элементы, включая mat-icon.

Метод 3. Использование директивы или компонента Angular

1. Создайте пользовательскую директиву или компонент, который инкапсулирует логику отключения элемента mat-icon. Например:

   <app-disabled-icon [disabled]="true">
   <mat-icon>...</mat-icon>
   </app-disabled-icon>

   При таком подходе вы должны определить логику в пользовательской директиве или компоненте для отключения mat-iconна основе значения входного свойства disabled.

   p>