Template parse errors: 'mat-icon' is not a known element

# Template parse errors: 'mat-icon' is not a known element

The Angular.js "Uncaught Error: Template parse errors: 'mat-icon' is not a known element" occurs when you forget to import the MatIconModule and add it to your imports array.

To solve the error, make sure you have the @angular/material library installed and the MatIconModule module imported.

First, make sure you have Angular material installed by running the following command.

shell

Copied!
npx ng add @angular/material

Once you have Angular Material installed, import the module in your app.module.ts file if it isn't imported already.

app.module.ts

Copied!
import { MatIconModule } from '@angular/material/icon';

Finally, add the module to the imports array in your app.module.ts file.

app.module.ts

Copied!
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatIconModule, // 👈️ added MatIconModule
    // ... rest
  ],
})
export class AppModule {}

Try to restart your development server if the issue persists.

If you get the error that "'mat-button' is not a known element", then you have to import the MatButtonModule component and add it to the imports array as well.

app.module.ts

Copied!
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule, // 👈️ added MatButtonModule
    MatIconModule, // 👈️ added MatIconModule
    // ... rest
  ],
})
export class AppModule {}

The process for solving similar "X is not a known element" errors related to Angular Material is the same.

# Forgetting to import a component that uses `mat-icon`

The error is also caused if you forget to import a component that uses mat-icon.

I have a component named example.

The file structure looks as follows.

shell

Copied!
app/
  └── example/
    └── example.component.html
    └── example.component.ts
  └── app.module.ts

Here is the code for example.component.html.

example.component.html

Copied!
<p>example works!</p>

<mat-icon>account_balance</mat-icon>

The file makes use of the mat-icon tag.

And here is the code for example.component.ts.

example.component.ts

Copied!
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

}

To resolve the error, open your app.module.ts file and make sure you have the ExampleComponent imported.

app.module.ts

Copied!
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// ✅ import MatButtonModule
import { MatButtonModule } from '@angular/material/button';

// ✅ import MatIconModule
import { MatIconModule } from '@angular/material/icon';

// ✅ import example component
import { ExampleComponent } from './example/example.component';

@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent // 👈️ add ExampleComponent to the declarations array
  ],

  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule, // 👈️ add MatButtonModule
    MatIconModule // 👈️ add MatIconModule to the imports array
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Notice that we imported MatIconModule and added it to the imports array.

Then we imported ExampleComponent and added it to the declarations array.

If I load the page in my browser, I can see that the icon is rendered and the error is resolved.

# Delete your node_modules and package-lock.json files and reinstall dependencies

If the issue persists, try to delete your node_modules folder and your package-lock.json files and reinstall your dependencies.

If you are on Windows, open CMD in your project's root directory (where your package.json file is) and issue the following commands.

cmd

Copied!
# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean your npm cache
npm cache clean --force

# 👇️ install packages
npm install

If you are on macOS and Linux, open bash or zsh in your project's root directory and issue the following commands.

shell

Copied!
#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean your npm cache
npm cache clean --force

# 👇️ install packages
npm install

Restart your development server and your IDE and check if the issue is resolved.

Press Ctrl + C to stop your development server and then run the npm start command to restart it.

shell

Copied!
npm start

If you get the error Cannot find module '@angular/core', click on the link and follow the instructions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Template parse errors: 'mat-icon' is not a known element