Question

我正在尝试在像这样的导航栏组件中使用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>

但不是图标，而是文字＆＃39; mic＆＃39;并且＆＃39;面对＆＃39;显示在页面

我已经在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,
    ...

字体也在索引中加载。

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

我有什么遗漏的吗？

提前致谢！

Answer 1

将此链接添加到index.html文件中

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

如果已加载字体，Angular材质mat-icon不起作用

1 个答案: