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="" rel="stylesheet"> <link href="" 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 { }8 Answers
The MatIconModule is missing from your imports.
imports: [ BrowserModule, FormsModule, HttpModule, MatButtonModule, MatIconModule, // <-- here
],In Angular 9 or greater you should
import { MatIconModule } from '@angular/material/icon'and then
imports: [ // other imports... MatIconModule, // <-- here
],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 { }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, ... ]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 ],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.
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.
run:
ng add @angular/material and you'll be fine.
