CODEWITHSUNDEEP
angularsassangular-cliionicons
Andre
Andre

Reputation: 31

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

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.

Upvotes: 3

Views: 3534

Answers (1)

Gayan Kalhara
Gayan Kalhara

Reputation: 765

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>

Upvotes: 6

Related Questions