Fix ‘mat-icon’ is not a known element Error in Angular

You are getting this error because the MatIconModule is missing in your app.module.ts file. The mat icons are a part of the MatIconModule, therefore, to use any mat icon in your Angular application, you have to first add the MatIconModule in the imports section of the app.module.ts file.

You can import the MatIconModule from the icon library of angular material.

Here is what you need add in your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatIconModule,  // <- Added here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note: There are chances that you might get this error even after adding the MatIconModule to your app.module.ts file. This usually happens when you have more than one module in your Angular application.

So, if there are multiple modules in your Angular application, you have to add the MatIconModule in every module wherever you are using mat icons.

OR, if you have a common shared module then you have to add the MatIconModule to the imports as well as the exports array of this shared module.

When you add the MatIconModule to the exports array of the shared module, every other module which imports this shared module can use all of its modules.