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

Question

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.

Answer 1

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

Answer 2

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