How to add open-iconic to angular 2 project

Question

I create an angular project, I added bootstrap to it but I noticed that the new version of bootstrap(version 4) doesn't have an icon library, so I install it using:

npm install open-iconic

But I don't know how to add it to my project, according to the web page, I need to add this two lines:

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

So I trying adding the path of the css on the angular-cli.json but my button is not showing the icon, can someone help me with this?,

Thanks in advance.

Answer 1

Add "../node_modules/open-iconic/font/css/open-iconic-bootstrap.min.css" to the "styles" option inside the .angular-cli.json file.

Answer 2

In case that some one is coming to this question and the solution above will not work for him properly and you have the error when you try to use scss include in your styles.scss:

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js./src/styles.scss) (Emitted value instead of an instance of Error) CssSyntaxError: node_modules\open-iconic\font\css\open-iconic-bootstrap.scss: Can't resolve '../node_modules/open-iconic/font/css/open-iconic.eot' in 'src'

it happens because the relative path in the file open-iconic-bootstrap points to $icon-font-path: '../fonts/' !default; and the sass compiler thinks that the root path is src/app (the angular root path)

the solution before the @import statement in styles.scss override $icon-font-path variable to point the right path:

$icon-font-path: '~open-iconic/font/fonts/';
@import "~open-iconic/font/css/open-iconic-bootstrap.scss";