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的圖標。