4

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.

Swaraj Behera
  • 41
  • 1
  • 3

4 Answers4

7

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",]
R15
  • 13,982
  • 14
  • 97
  • 173
Shyam
  • 71
  • 1
  • 2
1

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

Matheus Cardoso
  • 31
  • 4
0

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

DineshKP
  • 364
  • 2
  • 12
  • Hi @DineshKP. Thank you for answering. In your opinion which of the two is a better practice? Using CDN or importing the file to style.css in angular? – Swaraj Behera Jul 15 '22 at 05:53
0

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

user2393260
  • 11
  • 2