Mat-icon 不显示图标

问题描述 投票:0回答:4

我喜欢有角度的材料的设计,但使用它可能很痛苦。该网站展示了一个使用

的示例
<mat-icon>home</mat-icon>

但是,当我在项目中执行相同的操作时,我只看到文本“home”。

我不知道除了 import MatIconModule 之外我需要在哪里做任何事情。

有人知道吗?

我正在使用角度材料 v8.0.1。我还安装了material-design-icons v 3.0.1。并将其放在我的index.html 中。 (我一次做了一个)

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
angular angular-material icons
4个回答
9
投票

您需要删除

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

并更改为

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

4
投票

就我而言,有些图标可以工作,有些则不能。从

切换
<mat-icon>home</mat-icon>

<span class="material-icons">home</span>

解决了问题。


1
投票

Angular Material 8.0.1 要求包含 Material Design 图标,如下

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

您还需要将 mat-icon 模块导入为

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

然后在你的组件模板文件中你可以使用

<mat-icon>home</mat-icon>

0
投票

除了接受的答案之外,我还必须执行以下操作才能使事情正常运行

将以下内容添加到您的index.html文件中

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

您可能需要将以下内容添加到组件 css/scss 文件中。

mat-icon { font-family: 'Material Icons' !important; }

如果这也没有帮助,你可能必须从 css 切换到 scss 并强制使用 ng-deep

::ng-deep mat-icon { font-family: 'Material Icons' !important; }

希望这对某人有帮助

© www.soinside.com 2019 - 2024. All rights reserved.