编辑

Question

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

首先，如果我尝试更改默认的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” borh，但是它不起作用。

谢谢！

Answer 1

使用默认的材质图标

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

使用SVG图标

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

使用字体集（例如FontAwesome）

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

更多Icon | Angular Material

编辑

在此处Icons - Material Design

可用的图标列表

您应该真正了解有关Material Design以及将图标与Angular Material一起使用的更多信息。

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

1 个答案:

编辑