如何在角度使用mat-icon？

要在网页中包含图标，可以使用mat-icon指令。以前它被称为md-icon。最好使用mat-icon，因为它们可以提供SVG图标，即基于矢量的图标，可以适应任何分辨率和尺寸，另一方面，基于栅格的图标具有固定的点模式，如果指定大小，则将其指定大小。分辨率变化。

方法：

• 首先，我们必须使用以下语法将字体库加载到您的HTML文件中：

• 现在，使用以下命令在ngmodule.ts文件中导入MatIconModule：

  import {MatIconModule} from '@angular/material/icon';

• 使用以下命令显示图标：

  icon-name

您可以根据要求更改图标的颜色：

1. 基本的 。
2. 口音。
3. 警告。

这些图标可以用作按钮，也可以传达一些信息，例如表单字段的类型，状态等。

例子：

使用mat-icon让我们创建三个不同的按钮。

在您的index.html文件中，加载字体库。

现在使用mat-icon作为按钮。

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-child',
  template: `
  
  check
  check
  check
  
  `,
  styleUrls: []
})
export class childComponent {
  
}

输出：