Bootstrap Icons is a free, high-quality, open-source icon library with over 2,000 icons. Include them any way you like SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project.

Bootstrap is a popular CSS Framework for developing responsive and mobile-first websites. Bootstrap provides a collection of CSS and JavaScript components, as well as pre-designed templates and themes, that help developers build modern and visually appealing web interfaces with ease.

Instructions on Bootstrap Icons integration

1. Install Bootstrap Icons

Install Bootstrap using npm. Open your terminal and run the following command.

npm i bootstrap-icons

2. Add Bootstrap Icons styles

Open styles.scss (or styles.css) file and import Bootstrap.

Angular version < 17.

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

Angular version 17 and later

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

Optional

You can edit the angular.json file instead of the styles.scss.

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
],

Now, you can use Bootstrap Icons in your Angular templates.

Example

<i class="bi bi-8-square"></i>