Angular 6 和 Material 设计形式：元素名称和图标

Question

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

首先，如果我尝试更改默认的 formControlName 以进行测试，我会看到以下错误。为什么？我该如何解决？ （已解决！答案中的解决方案，非常感谢）。

其次，根据我找到的教程，我将更改 fa-envelope 图标并在 Material Design 文件夹中进行了搜索。但是没有图标信息或链接； 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”borh，但它不起作用。

谢谢大家！

Answer 1

1. 使用默认材质图标

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

1. 使用 SVG 图标

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

1. 使用字体集（如 FontAwesome）

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

更多Icon | Angular Material

编辑

图标列表在这里Icons - Material Design

您真的应该阅读更多关于 Material Design 以及使用带有 Angular Material 的图标的信息。