Angular Material Icons Not Rendering Within Component-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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

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/app/material.module.ts

CodePudding user response：

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">