mat-icon Angular 不出现

Question

我从 Angular 导入了 Mat-Icon，但是当我使用时，他没有出现。 有人帮助我吗？ 在我的代码下面：

应用程序模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';


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

索引.html：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TeslaAngular</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 class="mat-typography">
<app-root></app-root>
</body>
</html>

我的 app.component.html 当我调用垫子图标时：

<footer fxLayoutAlign="center end">
 <button class="button"><mat-icon>keyboard_arrow_down</mat-icon></button>
</footer>

当我在我的 app.component.html 中使用 mat-icon 时，它以这种形式出现： Mat-icon error

Answer 1

将 MatIconModule 添加到您的模块。

import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    ...
    MatIconModule,
  ]
})
export class YourModule {}

Answer 2

index.html看起来不错，如果您使用特定的材料主题，请确保将其import全局styles.scss文件，并将其包含在angular.json文件中。

styles.scss

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

angular.json

...
 "assets": ["src/favicon.ico", "src/assets"],
 "styles": [
       "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
       "src/styles.scss"
  ],
...

在使用命令ng add @angular/material安装Angular Material时，应该会自动添加这些额外的步骤。

如果这不起作用，我建议重新安装 A.Material，看看官方文档

mat-icon Angular 不出现

问题描述

2 个解决方案

解决方案1
0 2022-10-03 15:24:32

解决方案2
0 2022-10-03 16:41:39

mat-icon Angular 不出现

问题描述

2 个解决方案

解决方案1 0 2022-10-03 15:24:32

解决方案2 0 2022-10-03 16:41:39

解决方案1
0 2022-10-03 15:24:32

解决方案2
0 2022-10-03 16:41:39