角度材质输入字段中的图标未显示

Question

我尝试在角度材质输入字段中显示图标，但不幸的是该图标未显示。我使用了以下代码：

https://stackblitz.com/edit/stackblitz-starters-ngdhyg?file=src%2Fmain.ts

即使我添加了带有 matSuffix 属性的 mat-icon 组件，图标也没有显示。有人可以帮助我并告诉我我做错了什么或者我是否错过了什么吗？

预先感谢您的协助！

<form (ngSubmit)="onSubmit()" class="contact-form">
      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput type="email" formControlName="email" placeholder="Ex. [email protected]">
        <mat-icon color="primary" matSuffix>email</mat-icon>
      </mat-form-field>
  
       <button mat-raised-button color="primary" type="submit"> Save
       </button>
</form>

Answer 1

请找到下面的示例，它工作正常，我猜我们需要添加导入

组件ts

import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrl: 'form-field-overview-example.css',
  standalone: true,
  imports: [MatIconModule, MatFormFieldModule, MatButtonModule, MatInputModule],
})
export class FormFieldOverviewExample {
  onSubmit() {}
}

组件 html

<form (ngSubmit)="onSubmit()" class="contact-form">
  <mat-form-field>
    <mat-label>Email</mat-label>
    <input
      matInput
      type="email"
      formControlName="email"
      placeholder="Ex. [email protected]"
    />
    <mat-icon color="primary" matSuffix>email</mat-icon>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit">Save</button>
</form>

Stackblitz 演示