Angular Material Icons Not Rendering Within Component

Question

I've used Angular Material Icons on multiple projects and they work just fine. For some reason they don't currently work on my new project.

Here's my package.json file within node_modules/@angular/material/icons...

{
  "name": "@angular/material/icon",
  "fesm2020": "../fesm2020/icon.mjs",
  "fesm2015": "../fesm2015/icon.mjs",
  "esm2020": "../esm2020/icon/icon_public_index.mjs",
  "typings": "./icon_public_index.d.ts",
  "module": "../fesm2015/icon.mjs",
  "es2020": "../fesm2020/icon.mjs"
}

Here is my app.module...

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from './material.module';

import { AppRoutingModule } from './app-routing.module';

import { SharedModule } from './shared/shared.module';

import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';

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

Here's my module where I house my material imports...

import { NgModule } from "@angular/core";

import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';


@NgModule({
    imports: [
        MatCardModule, 
        MatButtonModule, 
        MatToolbarModule, 
        MatIconModule
    ], 
    exports: [
        MatCardModule, 
        MatButtonModule, 
        MatToolbarModule, 
        MatIconModule
    ]
})
export class MaterialModule {}

My component where I'm trying to use icons...

// The below code simply results in the word "menu" rather than the icon

<mat-toolbar>
    <a routerLink="/home">
        <mat-icon>menu</mat-icon>
    </a>
</mat-toolbar>

Here is my index.html...

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Eventer</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>

UPDATE

This might have something to do with this weird, incomplete installation (since some Material items work, but not the icons). When I create a new project, I'll attempt to go through the Getting Started guide and use ng add @angular/material, but I get the following kick-back...

$ ng add @angular/material
- Determining package manager...
i Using package manager: npm
- Searching for compatible package version...
ΓêÜ Found compatible package version: @angular/[email protected].
- Loading package information from registry...
ΓêÜ Package information loaded.
No terminal detected. '--skip-confirmation' can be used to bypass installation confirmation. Ensure package name is correct prior to '--skip-confirmation' option usage.
Command aborted.

In these cases I have to go through and use npm commands to manually install items and this could be why my Material icons are not working. Anyone have any knowledge on why I'm getting the above message when attempting to use ng add?

Thank you.

You should have stylesheet added for Material icons. Check this stackoverflow.com/a/49796321/9471852 — Siddhant
– Siddhant, Commented Feb 8, 2022 at 2:57

Chris Hamilton · Accepted Answer · 2022-02-08 07:46:04Z

7

Most likely what happened is you used npm install rather than ng add to install angular material. ng add performs some extra steps for an angular project.

Your best bet is to run ng add @angular/material to reinstall.

Exactly what extra steps are performed are located here: https://material.angular.io/guide/getting-started

Like was mentioned in another answer, missing this stylesheet from index.html will break mat-icons

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Just an update: the author's ng add command was failing due to a bug involving git bash https://github.com/angular/angular-cli/issues/21512. Switching to a different shell solved the issue.

edited Feb 8, 2022 at 7:46

answered Feb 8, 2022 at 4:11

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ACDev Over a year ago

I actually tried that command. For some reason, starting a fresh project and using ng add @angular/material alone doesn't successfully install Angular Material for me. I have to resort to using... npm install --save @angular/material @angular/cdk... then... ng add @angular/material. I also have that same line of code in my index.html.

Chris Hamilton Over a year ago

That's weird, are you using an older version of the angular cli? I'm on 13.0.3 and it works for me.

ACDev Over a year ago

I'm currently using Angular CLI 13.1.4

Chris Hamilton Over a year ago

Hmm, looks like you're running the command in an incompatible shell. It's supposed to ask you to confirm there, but it says no terminal detected. What application are you using to run it? (cmd, powershell, vscode terminal etc...). Both powershell and the vscode terminal work for me. From the dollar sign I'm guessing that's bash, maybe that's why.

Chris Hamilton Over a year ago

No worries, I found the bug already reported, and yeah it's just in git bash github.com/angular/angular-cli/issues/21512

|

silentnow · Accepted Answer · 2022-02-08 02:53:24Z

0

Check if you have

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">

in the head of your index.html

answered Feb 8, 2022 at 2:53

silentnow

6831 gold badge5 silver badges20 bronze badges

Comments

Joosep Parts · Accepted Answer · 2022-02-08 04:56:13Z

Your import order looks identical to mine, which works. Go over the install process again https://material.angular.io/guide/getting-started Add material with ng add.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { IconButtonComponent } from './icon-button/icon-button.component';
import { MaterialModule } from './material.module';

@NgModule({
  imports: [BrowserModule, FormsModule, MaterialModule],
  declarations: [AppComponent, HelloComponent, IconButtonComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { NgModule } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";
import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';


@NgModule({
    imports: [
        MatCardModule, 
        MatButtonModule, 
        MatToolbarModule, 
        MatIconModule
    ], 
    exports: [
        MatCardModule, 
        MatButtonModule, 
        MatToolbarModule, 
        MatIconModule,
    ]
})
export class MaterialModule {}

Working example: https://stackblitz.com/edit/icon-button-dxlpsw?file=src%2Fapp%2Fmaterial.module.ts

kathikeyan A · Accepted Answer · 2024-02-28 06:51:55Z

0

In addition to the accepted answer, I had to do the following to get things working

Adding the following to your index.html file

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

you may have to add the following to your components css/scss file.

mat-icon { font-family: 'Material Icons' !important; }

By chance if that did not help either, you may have to switch from css to scss and force a ng-deep on that

::ng-deep mat-icon { font-family: 'Material Icons' !important; }

Hope this helps some one

answered Feb 28, 2024 at 6:51

kathikeyan A

1,8772 gold badges20 silver badges35 bronze badges

Comments

Rajan · Accepted Answer · 2024-05-17 08:05:12Z

0

Try providing the class field "class="material-icons"" as well in the

Example:

<mat-toolbar>
    <a routerLink="/home">
        <mat-icon class="material-icons">menu</mat-icon>
    </a>
</mat-toolbar>

answered May 17, 2024 at 8:05

Rajan

3222 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular Material Icons Not Rendering Within Component

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related