Angular Material输入框中图标无法显示问题求助

你的模板代码逻辑正确，图标无法显示是因为缺少两个关键配置：

1. 导入MatIconModule #

在你的Angular根模块（如AppModule）中，需导入MatIconModule并加入imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule, // 新增这一行
    MatButtonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 引入Material Icons字体 #

在项目的index.html文件中添加字体资源链接：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

完成以上配置后，输入框后缀的email图标即可正常显示。

内容的提问来源于stack exchange，提问作者coder