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

Question

I'm working with Angular CLI and angular material v.5.2.5 and trying to use

mat-icon-button

but such an error produced by the console:

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

if I use

mat-raised-button

everything works fine cannot figure out how to solve that

index.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

main.ts

 import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatButtonModule } from '@angular/material/button';


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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

score 148 · Accepted Answer · answered May 05 '18 at 14:15

148

The MatIconModule is missing from your imports.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule,
    MatIconModule, // <-- here
],

answered May 05 '18 at 14:15

Ploppy

14,810
6
41
58

28

95% of all Material-related issues are resolved by importing the right modules. – Nino Filiu Sep 19 '18 at 08:56
And fortunately there are other answers specifying the package exportng the `MatIconModule`, thanks @freedev! – Hadrien TOMA Jun 06 '20 at 15:22
1

Well, in my case the problem was that I forgot to import the component that was using the mat-icon, and other stuff – O-9 Jul 13 '21 at 12:59
5

This did NOT help. I got the error after updating to Angular 12. – Tigerware Jul 20 '21 at 18:29
5

@BluE same thing happen to me. I went from angular 8 to 12. the issue ended up being that the component that this error was coming from was not in the declarations – Vlad Jul 28 '21 at 01:34
Did import MatIconTestingModule in my test, but that was appearently not enough... – spyro Jun 23 '22 at 11:28
It might help someone.I was getting other error too like is not a known element, is not a know element and few others.After doing this MatIconModule all vanish – KumarHarsh Apr 25 '23 at 17:09

freedev · Answer 2 · 2020-12-07T11:50:47.680

36

In Angular 9 or greater you should

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

and then

imports: [
    // other imports...
    MatIconModule, // <-- here
],

edited Dec 07 '20 at 11:50

answered May 20 '20 at 01:02

freedev

25,946
8
108
125

4

I'm doing the right imports, exports and into angular 9. But, still it is throwing same error. Any idea to resolve? – meDeepakJain Sep 01 '20 at 08:41
@meDeepakJain had you tried to remove `node_modules` and reinstall all the dependencies? – freedev Sep 01 '20 at 13:06
@meDeepakJain when doing lazy loading, i believe we also need to import the module in every sub-module we lazy load. i.e: inside `home.module.ts` we should also `import { MaterialModule } from '../app.material.module';` – Ricky Levi Nov 20 '20 at 12:40
@freedev Sadly deleting node_modules did not help either over here. – Tigerware Jul 20 '21 at 18:30

MD JULHAS HOSSAIN · Answer 3 · 2020-04-09T09:43:05.963

I am using Angular 6. and I made a different file called material.module.ts where I keep all the mat Module dependencies. You can call this material.module.ts file in app.module.ts file It will work.When i added the 'MatIconModule' into my code It works for me.

here is my code.

material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {MatButtonModule,MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule} from '@angular/material';


@NgModule({
  imports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule,MatIconModule],
  exports: [MatButtonModule, MatCheckboxModule,MatToolbarModule,MatInputModule,MatProgressSpinnerModule,MatCardModule,MatMenuModule, MatIconModule]
})


export class MaterialModule{}

and app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from './material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

why do we need both import and imports at material.ts – Ananthu A Nair Sep 08 '20 at 03:57 — Ananthu A Nair, Sep 08 '20 at 03:57

score 5 · Answer 4 · answered Sep 19 '22 at 14:01

5

For me, The mat icon module was correctly imported but the components where the error was coming from were not in the app module declarations for some weird reasons.

@NgModule({
  declarations: [
   ...
   TheFileWithMatIconTagComponent,
   ...
 ]

answered Sep 19 '22 at 14:01

Ilesanmi John

194
2
4

1

I was banging my head against desk trying to figure the issue and I didn't even realize that my component wasn't in app.module. Fixed the issue and all was right in the world. Thanks for pointing this reminder out. – Tim Oct 10 '22 at 18:17
1

*ugh* Why was my component not in the module? Thanks, I would have never guessed to look for that. – Otto Abnormalverbraucher May 05 '23 at 19:43

score 4 · Answer 5 · edited Apr 01 '20 at 06:55

4

import {MatIconModule} from '@angular/material';// this must add to app module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule,
    MatButtonModule,
    MatCheckboxModule,
    MatIconModule // this must add to app module.ts
  ],

edited Apr 01 '20 at 06:55

WombatPM

2,561
2
22
22

answered Apr 01 '20 at 05:09

shamee indrajith

59
1

score 4 · Answer 6 · answered Jul 31 '21 at 22:46

It also might happen that your app.module.ts or corresponding .module.ts file doesn't compile. If there are errors it will just throw out this error message instead of telling that there is an error in the module itself. Check out the related files for any issues with imports or code.

score 3 · Answer 7 · answered Apr 18 '20 at 14:36

3

If you set the modules and imported correctly still it does not work you can try this turn off the serve(Ctrl+C) and again start the server.

answered Apr 18 '20 at 14:36

Dinesh Kumar

131
3
11

score -1 · Answer 8 · edited Nov 09 '21 at 12:04

-1

run:

ng add @angular/material

and you'll be fine.

edited Nov 09 '21 at 12:04

Ruli

2,592
12
30
40

answered Nov 09 '21 at 11:40

stephen

1
1

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

8 Answers8

In Angular 9 or greater you should

Linked

Related