如何在 Angular 4 cli 项目中导入离子图标 (sass)

Question

如何在运行ng serve（npm start）的Angular 4 cli项目中添加ionicon（Sass）？

我遵循了以下步骤：

1. 导入离子图标库

   @import "~ionicons/dist/scss/ionicons";

2. 在变量.scss中：

   $ionicons-font-path: "~ionicons/dist/fonts";

在控制台中没有给出错误，但字体尚未加载，图标没有出现。

用

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

工作正常。

Answer 1

我能够通过在package.json中将ionicon版本更改为2.0.1版本来解决此问题。它在最新版本的Ionicons中不起作用。

所以，在package.json中

"ionicons": "2.0.1"

这就是我在主SCSS文件中导入的方式。

$ionicons-font-path: "../../../node_modules/ionicons/fonts";
@import "~ionicons/scss/ionicons";

这是 HTML 代码。

<i class="ion-location"></i>