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

Angular Typescript Angular Material

Angular Problem Overview

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 { }

Angular Solutions

Solution 1 - Angular

The MatIconModule is missing from your imports.

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

Solution 2 - Angular

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 { }

Solution 3 - Angular

In Angular 9 or greater you should

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

and then

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

Solution 4 - Angular

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
  ],

Solution 5 - Angular

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.

Solution 6 - Angular

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.

Solution 7 - Angular

run:

ng add @angular/material

and you'll be fine.

Content Type	Original Author	Original Content on Stackoverflow
Question	Vladyslav Plakhuta	View Question on Stackoverflow
Solution 1 - Angular	Ploppy	View Answer on Stackoverflow
Solution 2 - Angular	MD JULHAS HOSSAIN	View Answer on Stackoverflow
Solution 3 - Angular	freedev	View Answer on Stackoverflow
Solution 4 - Angular	shamee indrajith	View Answer on Stackoverflow
Solution 5 - Angular	Dinesh Kumar	View Answer on Stackoverflow
Solution 6 - Angular	Ivan Yurchenko	View Answer on Stackoverflow
Solution 7 - Angular	stephen	View Answer on Stackoverflow