2

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/material@13.2.1.
- 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.

ACDev
  • 139
  • 3
  • 11
  • You should have stylesheet added for Material icons. Check this https://stackoverflow.com/a/49796321/9471852 – Siddhant Feb 08 '22 at 02:57

3 Answers3

6

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.

Chris Hamilton
  • 9,252
  • 1
  • 9
  • 26
  • 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. – ACDev Feb 08 '22 at 04:58
  • That's weird, are you using an older version of the angular cli? I'm on 13.0.3 and it works for me. – Chris Hamilton Feb 08 '22 at 06:55
  • I'm currently using Angular CLI 13.1.4 – ACDev Feb 08 '22 at 07:07
  • So what error do you get when you do `ng add @angular/material` on a new project? Also, are you sure you're in the project root directory when you run it? That's a common mistake I make, after running `ng new` you need to do `cd ./projectName` and then `ng add`. – Chris Hamilton Feb 08 '22 at 07:11
  • I just updated the post to show what I get when I attempt to use that command. Thank you for your help. I'm definitely in the project's root directory when I run that command. – ACDev Feb 08 '22 at 07:21
  • 1
    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 Feb 08 '22 at 07:28
  • That fixed it and that explains so many things. I was using Git Bash. Tried it with VS Code and that worked. Thank you so much! – ACDev Feb 08 '22 at 07:40
  • 1
    No worries, I found the bug already reported, and yeah it's just in git bash https://github.com/angular/angular-cli/issues/21512 – Chris Hamilton Feb 08 '22 at 07:41
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

silentnow
  • 401
  • 3
  • 14
0

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

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33