Angular Material 图标未在组件内呈现

Question

我在多个项目中使用了 Angular Material 图标，它们工作得很好。出于某种原因，他们目前不在我的新项目上工作。

这是我的 package.json 文件，位于 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"
}

这是我的 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 { }

这是我的模块，我在其中放置 material 导入...

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 {}

我正在尝试使用图标的组件...

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

这是我的 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>

更新

这可能与这个奇怪的、不完整的安装有关（因为一些 Material 项目有效，但图标无效）。当我创建一个新项目时，我将尝试阅读入门指南并使用 ng add @angular/material，但我得到以下反馈...

$ 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.

在这些情况下，我必须通过并使用 npm 命令手动安装项目，这可能就是我的 Material 图标无法正常工作的原因。任何人都知道为什么我在尝试使用 ng add 时收到上述消息？

谢谢。

Answer 1

检查你是否有

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

在你的头上 index.html

Answer 2

你的进口订单看起来和我的一样，行得通。再次检查安装过程 https://material.angular.io/guide/getting-started 添加 material 和 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 {}

工作示例：https://stackblitz.com/edit/icon-button-dxlpsw?file=src%2Fapp%2Fmaterial.module.ts

Answer 3

最有可能发生的事情是您使用 npm install 而不是 ng add 来安装 angular material。 ng add 为 angular 项目执行一些额外的步骤。

最好的办法是运行 ng add @angular/material 重新安装。

具体执行了哪些额外步骤位于此处：https://material.angular.io/guide/getting-started

就像另一个答案中提到的那样，index.html 中缺少此样式表会破坏 mat-icons

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

只是一个更新：由于涉及 git bash https://github.com/angular/angular-cli/issues/21512 的错误，作者的 ng add 命令失败了。切换到另一个 shell 解决了这个问题。

Angular Material 图标未在组件内呈现

Angular Material Icons Not Rendering Within Component

angular-material

angular