Angular Material 7 图标

The <垫子图标> ，一个角度指令，用于添加基于矢量/svg 的具有材质样式的图标。

在本章中，我们将展示使用 Angular Material 绘制图标控件所需的配置。

创建 Angular 应用程序

按照以下步骤更新我们在其中创建的 Angular 应用程序 Angular 6 - 项目设置 chapter：

步骤	描述
1	创建一个有名字的项目材料应用正如在 Angular 6 - 项目设置 chapter.
2	Modify app.module.ts , app.component.ts , app.component.css and app.component.html 如下所述。保持其余文件不变。
3	编译并运行应用程序以验证实现逻辑的结果。

以下是修改后的模块描述符的内容 app.module.ts .

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatIconModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件的内容 app.component.html .