Material图标未从名称识别：Angular Chips组件示例调试求助

Let's break down why your cancel icon isn't showing up and fix it step by step:

Common Root Causes & Solutions #

1. You're Missing the MatIconModule Import #

This is the most frequent culprit. Even though you're using <mat-icon> in your template, Angular doesn't know how to render it unless you explicitly import the icon module in your app's module file.

Update your app.module.ts to include these required Material modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Add these Material modules
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';

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

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Required for all Angular Material components
    MatChipsModule,
    MatFormFieldModule,
    MatIconModule // Critical for rendering <mat-icon> elements
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Material Icons Font Isn't Loaded #

Angular Material icons rely on Google's Material Icons font to display correctly. You need to add this font reference to your index.html file's <head> section:

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

3. Clean Up Unused Imports (Optional) #

Your component has a few unused imports that can be removed to reduce clutter:

• DomSanitizer and MatIconRegistry (you're not using custom icons here)
• MatFormFieldControl (not needed for your chip implementation)

Why This Works #

• MatIconModule registers the <mat-icon> component with Angular, so it knows how to parse and render the element.
• The Material Icons font provides the actual icon glyphs for names like cancel. Without it, Angular can't map the icon name to a visible symbol.

After applying these changes, your cancel icon should appear properly on the chips.

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