How to fix 'mat-icon' is not a known element error?-CodePudding

I'm pretty new to Angular, doing my first app. I wanted to use Angular Material library icons and encountered an error saying that 'mat-icon' is not a known element:.
Full error here

error NG8001: '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.
11       <mat-icon>favorite</mat-icon>

From what I understood, the problem comes when you don't import MatIconModule in App module.
However, I still get the same error even after importing it.

Here is what I have tried so far.

html file, obviously error refers to this component, where I use the icon

<div>
  <div>
    <button mat-fab disabled aria-label="Example icon button with a heart icon">
      <mat-icon>favorite</mat-icon>
    </button>
  </div>
</div>

app.modules.ts

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

import { HttpClientModule } from "@angular/common/http";
import { MatIconModule } from "@angular/material/icon";
import { MatButtonModule } from "@angular/material/button";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatCardModule } from "@angular/material/card";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatToolbarModule,
    HttpClientModule,
    MatIconModule,
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

And Package.json

{
  "name": "angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.2.5",
    "@angular/cdk": "~10.2.7",
    "@angular/common": "~10.2.5",
    "@angular/compiler": "~10.2.5",
    "@angular/core": "~10.2.5",
    "@angular/forms": "~10.2.5",
    "@angular/material": "^10.0.0",
    "@angular/material-moment-adapter": "^10.0.0",
    "@angular/platform-browser": "~10.2.5",
    "@angular/platform-browser-dynamic": "~10.2.5",
    "@angular/router": "~10.2.5",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.4",
    "@angular/cli": "~10.2.4",
    "@angular/compiler-cli": "~10.2.5",
    "@angular/language-service": "~10.2.5",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.8"
  }
}

I also tried npm i, but didn't help either. Let me know please, if I should include more files so that you can understand the problem better. Any help will be appreciated.

Update

Now instead of importing Material components in app.module.ts I've created `material.module.ts and now import looks like so.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { MaterialModule } from "./material/material.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

material.module.ts

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


const MaterialComponents = [
  MatButtonModule,
  MatIconModule,
];

@NgModule({
  imports: [MaterialComponents],
  exports: [MaterialComponents],
  providers: [
    {
      provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
      useValue: {
        strict: true,
        useUtc: true,
      },
    },
  ],
  declarations: [],
})
export class MaterialModule {}

Unfortunately, even though it looks better but doesn't work either. I feel like there is version mismatch.

CodePudding user response：

Have you already add the font in the index.html

  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

Here is an example

CodePudding user response：

Simply import MatIconModule and add MatIconModule in your imports array in app.module.ts