How to import ionicons (sass) in Angular 4 cli project

Question

How to add ionicons (Sass) in Angular 4 cli project running ng serve (npm start)?

I followed these steps:

1. Import ionicons lib

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

2. In variables.scss:

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

In console did not give errors, but the fonts have not been loaded and icons did not appear.

Using

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

works fine.

Answer 1

I was able to fix this issue by changing ionicons version to version 2.0.1 in package.json. It was not working in the latest version of Ionicons.

So, in package.json

"ionicons": "2.0.1"

This is how I imported in main SCSS file.

$ionicons-font-path: "../../../node_modules/ionicons/fonts";

@import "~ionicons/scss/ionicons";

This is the HTML Code.

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