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/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.
3 answers
solution1
4 ACCPTED 2022-02-08 04:11:26
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.
solution2
0 2022-02-08 02:53:24
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
solution3
0 2022-02-08 03:32:32
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.