mat-icon Angular don't appear-CodePudding

I Import the Mat-Icon from Angular, but when i use then, he does not appear. Someone helps me? Below my code:

app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';


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

index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TeslaAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<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">
</head>
<body >
<app-root></app-root>
</body>
</html>

My app.component.html when i call the mat-icon:

<footer fxLayoutAlign="center end">
 <button ><mat-icon>keyboard_arrow_down</mat-icon></button>
</footer>

When i used the mat-icon i my app.component.html, this appear in this form: Mat-icon error

CodePudding user response：

Add MatIconModule to your module.

import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    ...
    MatIconModule,
  ]
})
export class YourModule {}

CodePudding user response：

The index.html looks fine, if you are using a specific material theme, make sure you import it within your global styles.scss file, and also include it in your angular.json file.

styles.scss

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

angular.json

...
 "assets": ["src/favicon.ico", "src/assets"],
 "styles": [
       "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
       "src/styles.scss"
  ],
...

These extra steps should've been added automatically when installing Angular Material using the command ng add @angular/material.

If this doesn't work, I suggest reinstalling A. Material, take a look at the official docs