如何将图标添加到 mat-icon-button

在 Angular Material 中，mat-icon-button 是一个常用的组件。它允许你在按钮上添加一个 Material Design 图标。本文将介绍如何将图标添加到 mat-icon-button 中。

步骤

1. 安装 Material 图标包

如果还没有安装 Material 图标包，可以通过以下命令来安装：

npm install @angular/material @angular/cdk @angular/animations
npm install @material-design/icons

2. 导入图标

将需要的图标导入到组件中。例如，我们需要将 “add” 图标导入到组件中，可以在组件头部添加以下代码：

import { MatIconModule } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'add',
      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/add.svg')
    );
  }
}

上述代码中，我们使用 DomSanitizer 对象将 svg 图像转换为可信资源，然后通过 MatIconRegistry 对象将其添加到图标注册表中。

3. 使用图标

在 HTML 模板中使用 mat-icon-button 组件，并使用 mat-icon 元素来显示图标。例如，我们要在 mat-icon-button 中使用刚刚导入的 “add” 图标，可以在 HTML 模板中添加以下代码：

<mat-icon-button>
  <mat-icon>add</mat-icon>
</mat-icon-button>

这样就可以将图标添加到 mat-icon-button 中了。

总结

通过本文的介绍，我们学习了如何将图标添加到 mat-icon-button 中。首先需要安装 Material 图标包，然后将需要的图标导入到组件中，并在 HTML 模板中使用 mat-icon 元素来显示图标。