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

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 { }
131345 次浏览
小开
最佳答案

The MatIconModule is missing from your imports.

imports: [
BrowserModule,
FormsModule,
HttpModule,
MatButtonModule,
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 { }
小开 
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
],
小开

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.

小开

In Angular 9 or greater you should

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

and then

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

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.

小开

run:

ng add @angular/material

and you'll be fine.

小开

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

提交答案