How to use bootstrap icons with npm i bootstrap-icons in Angular

There are a few ways to go about it but I found this way to be the most working and simple. First of all, download the package and add it to your dependencies.

npm i bootstrap-icons --save

Then add this line to your styles.css file at the top:

@import "~bootstrap-icons/font/bootstrap-icons.css";

Now whenever you write a HTML with the i tag with the bi <icon> code like below, you’ll see the icon appear!

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

For example, go to we can see the code to the right that the code snippet is indeed “bi bi-house” for the house icon.

0 0 votes
Article rating
Notify of

Inline Feedbacks
View all comments