angularangular-material-7

Error using mat-icon of angular material with Angular 10


I have a MaterialModule

import { NgModule } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';

@NgModule({
 declarations: [],
 imports: [
  MatButtonModule,
  MatIconModule
 ]
})
export class MaterialModule { }

And I import this module in my App Module

app.module

Then in app.component.html I try to use the mat-icon component

<button mat-button>
<mat-icon>face</mat-icon>
Click me!
</button>

but always get this error

error

Any idea please?

Thanks


Solution

  • You have to export both MatButtonModule and MatIconModule in your MaterialModule

    import { NgModule } from '@angular/core';
    import {MatButtonModule} from '@angular/material/button';
    import {MatIconModule} from '@angular/material/icon';
    
    @NgModule({
     declarations: [],
     imports: [
       MatButtonModule,
       MatIconModule
     ],
     exports: [
       MatButtonModule,
       MatIconModule
     ]
     })
     export class MaterialModule { }