CODEWITHSUNDEEP
htmlcssangularbootstrap-5bootstrap-icons
Swaraj Behera
Swaraj Behera

Reputation: 61

I want to incorporate bootstrap-icons in an angular project but it is not working

I want to implement bootstrap-icons in an angular project but it is not working. I ran the following command,

npm i bootstrap-icons

But I am unable to add icons in the web page with icon fonts.

For now, I have added the bootstrap icon CDN in index.html file and it is working.

I want to know if we need to add the path for bootstrap icon file anywhere in the angular.jason file or it should work after the install command.

Your answers are appreciated!!!

Thank you.

Upvotes: 6

Views: 12557

Answers (6)

Ross
Ross

Reputation: 11

For anyone who has upgraded to Angular 17 below are the steps:

  1. run npm i bootstrap-icons --save
  2. in the styles.css file enter @import 'bootstrap-icons/font/bootstrap-icons.min.css';

N.B. Many answers on the web report @import '~bootstrap-icons/font/bootstrap-icons.min.css'; (note the tilde) but it is now deprecated to use the tilde

Upvotes: 0

Al Imran
Al Imran

Reputation: 179

You can simple use the CDN version in your index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

And inside your components:

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

Upvotes: 0

Shyam
Shyam

Reputation: 131

First, run npm i bootstrap-icons --save

then in the angular.json file

Add the path to the "Styles" key value like this,

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

Upvotes: 13

Matheus Cardoso
Matheus Cardoso

Reputation: 121

First install bootstrap icons with npm:

npm i bootstrap-icons --save

Then go to your angular.json file and add this to your styles:

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

Now you can use whatever icon you want. ex.:

<i class="bi bi-bootstrap-fill"></i>

If you don't want to use npm to use bootstrap icons, you might look at: https://icons.getbootstrap.com/#install

Upvotes: 2

user2393260
user2393260

Reputation: 11

I too was facing the issue. After importing the icon CSS file at style.css it is working perfectly

Upvotes: 0

DineshKP
DineshKP

Reputation: 364

Installing a package to your project via npm just downloads the package files to node_modules. You would have to configure your project to import the necessary files in order to utilise the package.

In this case, since it is a icons library, you probably have a stylesheet which you already pointed out works via CDN inclusion in the html file.

In angular, try importing the bootstrap-icons.css file into your styles.css file. You would need to check where the bootstrap-icons folder is in node_modules and find the css file within the folder structure.

From my local install, I identify the location to be: node_modules/bootstrap-icons/font/bootstrap-icons.css

bootstrap-icons.css file location

In your styles.css file, add the import statement: @import '~bootstrap-icons/font/bootstrap-icons.css';

This should get your icons working. If not, ensure the bootstrap-icons.css file path is correct and accessible.

Attaching a working example (hosted on stackblitz): https://stackblitz.com/edit/angular-bootstrap-icons?file=src%2Fstyles.css,src%2Fapp%2Fapp.component.html

Upvotes: 0

Related Questions