Example of using scss with "npm i bootstrap-icons"

[olenderhub]

Hello,

I want to use icons in way like this:

<i class="bi-alarm"></i>

From my understanding to use this I should do in my project:

npm i bootstrap-icons

then in my app.scss file

@import "node_modules/bootstrap-icons/font/bootstrap-icons";

but with this scheme, I have 404 in network with regards to https://github.com/twbs/icons/blob/main/font/bootstrap-icons.scss#L2 (http://localhost:4200/assets/fonts/bootstrap-icons.woff2?524846017b983fc8ded9325d94ed40f3 - 404)

Please guide me on how to configure this properly. I checked other issues but didn't find a full example of this.

[olenderhub]

Found how to do this. Information to others who are struggling with it on my ember.js example.

@import "node_modules/bootstrap-icons/font/bootstrap-icons";

was correct in app.scss file

I just needed to place the file at a different path (under assets/fonts) in my framework configuration, then build the app.

In my case in ember.js

it would be in ember-cli-build.js

  app.import('node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff', {destDir: 'assets/fonts'});
  app.import('node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2', {destDir: 'assets/fonts'});

source: https://guides.emberjs.com/v3.7.0/addons-and-dependencies/managing-dependencies/#toc_other-assets-1

then just rebuild the app and in my dist folder, this will be where it should be.

Now it works with:

<i class="bi-alarm"></i>

I am closing this question :)