Angular 6、Material design形式：元素名称和图标

Question

我正在尝试在 Angular 6 + Material Design 中编辑一个表单。 在上面的代码中，我有两个问题。

首先，如果我尝试更改默认的 formControlName 进行测试，我会看到以下错误。 为什么？ 我该如何解决？

其次，我会更改 fa-envelope 图标，并且根据我找到的教程在 Material Design 文件夹中进行了搜索。 但是那里没有图标信息或链接； 材料设计中的图标是如何管理的？ 我该如何改变它？

<form (ngSubmit)="login()" [formGroup]="registrationForm">
    <div class="mt-4">
    <mat-icon matPrefix fontSet="fa" fontIcon="fa-envelope" class="fa-24px text-center mr-3"></mat-icon>
    <mat-form-field class="w-100">
       <input type="email" formControlName="test" matInput placeholder="Deine Name" required="required">
    </mat-form-field>
(...)

编辑

我已经有指令了

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

根据教程https://material.angular.io/components/icon/api#MatIcon； 现在，我在哪里可以找到图标名称列表以及我应该使用哪种语法编写？ 例如，我尝试在图标标签中间和“fontIcon”参数中使用“face”，但它不起作用。

Answer 1

1. 使用默认材质图标

<mat-icon>envelope</mat-icon>

2. 使用 SVG 个图标

<mat-icon svgIcon="envelope"></mat-icon>

3. 使用字体集（如 FontAwesome）

<mat-icon fontSet="fa" fontIcon="envelope"></mat-icon>

这里有更多图标 | Angular 资料

编辑

此处提供图标列表图标 - 材料设计

你真的应该阅读更多关于Material Design和使用Angular Material的图标。