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 https://icons.getbootstrap.com/icons/house/ 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
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments