我喜欢有角度的材料的设计,但使用它可能很痛苦。该网站展示了一个使用
的示例<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">
您需要删除
<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">
就我而言,有些图标可以工作,有些则不能。从
切换<mat-icon>home</mat-icon>
到
<span class="material-icons">home</span>
解决了问题。
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>
除了接受的答案之外,我还必须执行以下操作才能使事情正常运行
将以下内容添加到您的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; }
希望这对某人有帮助