mat-icon is not a known element in angular

I am trying to use an angular material icon for add but I get this error 'mat-icon' is not a known element: 1. If 'mat-icon' is an Angular component, then verify that it is part of this module. 2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
the structure of my project is like this I have a modules folder that contains a dashboard folder and I have a folder named shared that it has it owns module. this is my dashboard code

<div class="search-div">
<button mat-raised-button (click)="onCreate()">
<mat-icon>add</mat-icon> Create
</button>
</div>


this is my app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DefaultModule } from './layouts/default/default.module';
import { MatTableModule } from '@angular/material/table';
import { HttpClientModule } from '@angular/common/http';
import {UserInfoService} from './services/user-info.service'
import {MatCardModule} from '@angular/material/card';
import {MatDialogModule} from '@angular/material/dialog';
import { PostsComponent } from './modules/posts/posts.component';
import { MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NewuserComponent } from './modules/newuser/newuser.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';

@NgModule({
declarations: [
AppComponent,
NewuserComponent,




],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
DefaultModule,
MatTableModule,
HttpClientModule,
MatCardModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
FormsModule,
ReactiveFormsModule
],

providers: [UserInfoService],
bootstrap: [AppComponent],
entryComponents:[NewuserComponent]
})
export class AppModule { }


how can i fix that error?

Continue reading...