Question

我有 mat-button-toggle ，我想在按下按钮时更改图标，是否可以修改svgIcon属性？谢谢

  <mat-button-toggle value="left">
    <mat-icon class="mat-icon" svgIcon="Thermometer" role="img" aria-hidden="true"></mat-icon>
  </mat-button-toggle>

我找到了这个可能的解决方案（How to change material-icon on click event with angular2/4 material?），但实现方式不同

Answer 1

对于寻求知识的人们来说，旧问题却是新答案。解决方案非常简单。

注意：这是包括自定义svg图标并使用svgIcon属性加载图标的方式

<mat-button-toggle value="left">
    <mat-icon class="mat-icon" svgIcon="{{ iconName }}" role="img" aria-hidden="true"></mat-icon>
</mat-button-toggle>

请注意，我已将您的“温度计”更改为“ {{iconName}}”。也就是说，我已将其绑定到可以在.ts文件中设置的局部变量'iconName'。

@Component()
export class MyComponent {
    iconName: string = 'Thermometer';
}

要更改图标，只需遵循您先前发布的链接中的解决方案，但更改变量“ iconName”，它应该可以工作。

Answer 2

这是一篇展示如何使用自定义图标的帖子： https://alligator.io/angular/custom-svg-icons-angular-material/

更改mat-icon上的svgIcon属性 - Angular 5

2 个答案: