我正尝试在这样的导航栏组件中使用 mat-icon
<mat-toolbar>
<span><img class="icon" src="../../assets/icon.png" fxFlex="auto"></span>
<span class="fill-space"></span>
<button mat-icon-button>
<mat-icon aria-label="restart">mic</mat-icon>
</button>
<i class="material-icons">face</i>
</mat-toolbar>
但是页面中显示的不是图标，而是文本“mic”和“face”
我已经在 app.module.ts 中导入了模块
import {MatCardModule,
MatIconModule,
MatToolbarModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatSliderModule,
MatSnackBarModule,
MatTableModule,
MatTooltipModule,
MatProgressBarModule,
} from '@angular/material';
imports: [
BrowserModule,
ImageCropperModule,
BrowserAnimationsModule,
MatCardModule,
MatIconModule,
MatToolbarModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatSliderModule,
MatSnackBarModule,
MatSlideToggleModule,
MatTableModule,
MatTooltipModule,
MatProgressBarModule,
...
并且字体也被加载到 index.html 中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
结果是这样的: mat-icon not showing
环境:
Angular CLI: 6.0.5
Node: 8.11.2
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.5
@angular-devkit/build-angular 0.6.5
@angular-devkit/build-optimizer 0.6.5
@angular-devkit/core 0.6.5
@angular-devkit/schematics 0.6.5
@angular/cdk 6.2.0
@angular/cli 6.0.5
@angular/flex-layout 6.0.0-beta.15
@angular/material 6.2.0
@ngtools/webpack 6.0.5
@schematics/angular 0.6.5
@schematics/update 0.6.5
rxjs 6.2.0
typescript 2.7.2
webpack 4.8.3
有什么我遗漏的吗？
提前致谢!
最佳答案
在 index.html 文件中添加此链接
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
关于鉴于字体已经加载， Angular Material 垫图标不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50913212/