mat-icon is not a known element in angular

Viewed 4155

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?

1 Answers

I think the problem is with your folder structure. In app folder, create both components newuser and dashboard. no need to create any module for newuser or dashboard otherwise if you create any module for both of them, then you have to import the things in their particular module. You have a working code, just structured it properly.

Related