Angular 5中修改mat-icon的svgIcon属性实现按钮切换图标

当然可以通过修改svgIcon属性来实现点击切换图标的效果！针对Angular Material的mat-button-toggle组件，这里给你两种实用的实现方案：

方案一：绑定按钮选中状态动态切换 #

这种方式直接利用mat-button-toggle的checked状态，通过三元表达式动态绑定svgIcon，代码简洁直观：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始图标状态：未选中时显示默认图标
  isToggleChecked = false;
}

模板代码 #

<mat-button-toggle 
  value="left"
  [(checked)]="isToggleChecked"
>
  <mat-icon 
    class="mat-icon" 
    [svgIcon]="isToggleChecked ? 'Thermometer-Active' : 'Thermometer'"
    role="img" 
    aria-hidden="true"
  ></mat-icon>
</mat-button-toggle>

原理说明：通过双向绑定[(checked)]把按钮的选中状态同步到组件的isToggleChecked变量，然后根据这个变量的值切换svgIcon的属性值——你只需要把Thermometer-Active换成你要切换的目标SVG图标名称即可。

方案二：点击事件手动控制切换 #

如果切换图标时需要额外执行逻辑（比如发送请求、修改其他组件状态），可以用点击事件触发方法来切换：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 默认显示初始图标
  currentSvgIcon = 'Thermometer';

  toggleIcon(): void {
    // 切换图标名称，同时可在这里添加其他逻辑
    this.currentSvgIcon = this.currentSvgIcon === 'Thermometer' 
      ? 'Thermometer-Active' 
      : 'Thermometer';
  }
}

模板代码 #

<mat-button-toggle 
  value="left"
  (click)="toggleIcon()"
>
  <mat-icon 
    class="mat-icon" 
    [svgIcon]="currentSvgIcon"
    role="img" 
    aria-hidden="true"
  ></mat-icon>
</mat-button-toggle>

注意事项 #

• 确保你要切换的SVG图标已经通过MatIconRegistry正确注册到项目中，否则切换后图标无法正常显示。
• 如果使用mat-button-toggle-group，也可以结合组的选中值来统一控制图标切换，逻辑类似。

内容的提问来源于stack exchange，提问作者avechuche