mat-icon Angular don't appear

Question

mat-icon Angular don't appear

1.8k Views Asked by Vinícius Kock At 03 October 2022 at 15:06

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 class="mat-typography">
<app-root></app-root>
</body>
</html>

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

<footer fxLayoutAlign="center end">
 <button class="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

Original Q&A

There are 3 best solutions below

**Ryan** · Answer 1 · 2022-10-03T15:24:32.717000

Ryan On 03 October 2022 at 15:24

Add MatIconModule to your module.

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

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

**Andres2142** · Answer 2 · 2022-10-03T16:41:39.410000

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

**Phil** · Answer 3 · 2024-03-11T21:48:21.047000

When using Angular 17 standalone with ssr I noticed my mat-icons were displaying text. I had already added material using ng add and had the css styles loaded. There seems to be an issue when using css table in the same html file. When I removed css table the mat-icons displayed correctly.

Just wanted to share this fix in case anyone else experienced the same issue.

        Package                         Version
---------------------------------------------------------
@angular-devkit/architect               0.1702.3
@angular-devkit/build-angular           17.2.3
@angular-devkit/core                    17.2.3
@angular-devkit/schematics              17.2.3
@angular/cdk                            17.2.2
@angular/cli                            17.2.3
@angular/fire                           17.0.1
@angular/material                       17.2.2
@angular/ssr                            17.2.3
@schematics/angular                     17.2.3
rxjs                                    7.8.1
typescript                              5.2.2
zone.js                                 0.14.4

mat-icon Angular don't appear

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in ANGULAR

Related Questions in ANGULAR-MATERIAL

Related Questions in MAT-ICON

Trending Questions

Popular # Hahtags

Popular Questions