如何在角度使用mat-icon？

在Angular项目中，MatIconModule提供了一种灵活且易于使用的方式来添加图标。这个模块使得可以使用Material Icons的图标，它包含了大约1000个图标，这些图标可以在应用程序中使用。这里我们将介绍如何在Angular中使用MatIconModule模块，并添加Material Icons的图标。

安装

要开始添加Material Icons图标，首先需要安装MatIconModule模块。可以使用以下命令从npm进行安装:

npm install --save @angular/material

导入MatIconModule模块

将MatIconModule模块从@angular/material/icon导入到您的Angular应用中。

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

@NgModule({
  imports: [
    BrowserModule,
    MatIconModule
  ],
  ...
})
export class AppModule { }

使用MatIconComponent

现在，我们已经导入了MatIconModule，可以在Angular组件中使用MatIconComponent。你可以在模板中使用MatIconComponent：

<mat-icon>face</mat-icon>

这里我们使用“face”作为我们想要显示的Material Icons的图标名称。现在我们可以将任何Material Icons图标名称作为标记中的内容来显示图标。

可以使用类名来改变图标的尺寸和颜色。默认情况下，图标的尺寸是24px。要增加图标的大小，请添加一个类名.material-icons，并在类名后面添加.larger类名。

<mat-icon class="material-icons larger">face</mat-icon>

您也可以通过添加.mat-icon-color-primary或.mat-icon-color-accent类名来改变图标的颜色：

<mat-icon class="material-icons mat-icon-color-primary">face</mat-icon>

MatIconComponent也可以从组件类中动态地设置图标名称：

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

@Component({
  selector: 'app-root',
  template: `
    <mat-icon>{{iconName}}</mat-icon>
  `,
  styles: [`
    mat-icon {
      font-size: 48px;
      margin: 16px;
    }
  `]
})
export class AppComponent {
  iconName = 'face';
}

在这个例子中，我们定义了一个叫做iconName的属性作为AppComponent的一部分。我们将这个属性绑定到MatIconComponent中并将值设置为“face”。这将在Angular应用程序中显示一个名为face的Material Icons图标。

到这里就结束了，希望本文对你有所帮助。