鉴于字体已加载，角材料垫图标不起作用

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>

Run Code Online (Sandbox Code Playgroud)

但是页面中显示的不是图标，而是文本“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,
    ...

Run Code Online (Sandbox Code Playgroud)

并且字体也在 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>

Run Code Online (Sandbox Code Playgroud)

结果是这样的： mat-icon不显示

环境：

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

Run Code Online (Sandbox Code Playgroud)

有什么我错过了吗？

提前致谢！

Answer 1

小智 3

在index.html文件中添加此链接

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，4 月前
查看次数：	4853 次
最近记录：	6 年，8 月前