How to programmatically use bootstrap icons in an angular project?

Question

Here is the official bootstrap documentation on the usage of their icons:

I'm trying to figure out how to use the package, if I'm supposed to be using it at all. None of their usage options say anything about the package I was told to install 6 seconds ago.

I just don't understand why the documentation would tell me to install the package if all I was supposed to do was copy the svg's I needed and then uninstall the package.

Is there some way for me to import one into an angular component, in the spirit of actual source control?

EDIT: in response to why I'm not using the following html as recommended in an answer <svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

is because this doesn't use the bootstrap icon library at all. Pasted into your response for demonstration, and stack overflow doesn't use bootstrap.

Pini Cheyni · Accepted Answer · 2021-06-02 07:03:57Z

181

Quite old, but since I had the same problem and these answers where not helpful at all, here is the Solution I came up with.

First install the bootstrap icons package (--save adds it to your dependencies as well):

$ npm i bootstrap-icons --save

Then add this line to your styles.css file:

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

From now on you can use it anywhere in your app, just like intended by the bootstrap documentation:

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

edited Jun 2, 2021 at 7:03

Pini Cheyni

5,5072 gold badges45 silver badges58 bronze badges

answered Dec 24, 2020 at 15:30

BBoom

1,9691 gold badge14 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

notacorn Over a year ago

i just accepted the most upvoted answer since by that time i moved onto a different project but heres an upvote, hopefully it helps someone!

Eliseo Over a year ago

I just take account this answer, since version V.1.2.0 it's a very interesting answer :)

Reez0 Over a year ago

Maybe I'm blind, but this isn't mentioned anywhere in the documentation.

jwanglof Over a year ago

Can verify that this works with the latest Bootstrap icons :)

elier Over a year ago

Still working for the latest versions: "@angular/core": "^15.1.0", "@ng-bootstrap/ng-bootstrap": "^14.1.0", "bootstrap": "^5.2.3", "bootstrap-icons": "^1.10.4",

|

Eliseo · Accepted Answer · 2021-01-25 15:43:28Z

*Updated since version v1.2.0, is added Icon fonts, please, take a look the solution proposed by @BBoom

You need copy, or the bootstrap-icons.svg or the icons/*.svg in any way. You can make it manually. If you copy in root, you can use

  <svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="bootstrap-icons.svg#heart-fill"/>
  </svg>

If you copy in assets folder

  <svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="assets/bootstrap-icons.svg#heart-fill"/>
  </svg>

Well, you can say to Angular that copy the files for you. For this you can change the angular.json file, so if you add to assets:

   "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "glob": "bootstrap-icons.svg",
        "input": "./node_modules/bootstrap-icons/",
        "output": "/"
      }
    ],

Angular copy the bootstrap-icons.svg in root of your project,

If you add

  {
    "glob": "*.svg",
    "input": "./node_modules/bootstrap-icons/icons/",
    "output": "/assets/img/"
  }

Angular copy the *.svg in assets/img and you can use

 <img src="assets/img/shop.svg" alt="" width="32" height="32">

kode · Accepted Answer · 2021-06-15 12:23:31Z

14

This works for me

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

Add like this in angular.json file

answered Jun 15, 2021 at 12:23

kode

1511 silver badge2 bronze badges

1 Comment

Micah Ludwick Over a year ago

This ended up working for me as well. To add just a little more context on how I got it working, I had to use <i class="bi bi-{icon-name}"></i> where {icon-name} is substituted with the actual name of the icon you need to use

Guillaume Husta · Accepted Answer · 2024-10-22 21:58:09Z

2

try to use npm package https://www.npmjs.com/package/ngx-bootstrap-icons

module allows you to use the Bootstrap Icons in your angular application without additional dependencies.

edited Oct 22, 2024 at 21:58

Guillaume Husta

4,42538 silver badges41 bronze badges

answered Jan 16, 2021 at 14:26

avmaisak

313 bronze badges

Comments

Carlos L. Rodríguez · Accepted Answer · 2021-01-28 23:53:52Z

0

To use the sprite, this is the process that I followed and is working:

npm i --save bootstrap-icons

Then in ./angular.json inside the assets section I added:

{
  "glob": "*.svg",
  "input": "./node_modules/bootstrap-icons/",
  "output": "/b-icons/"
}

Then you can use the icons directly on your template:

<svg class="bi" width="32" height="32" fill="currentColor">
 <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

Angular v11.1.0, bootstrap-icons v1.3.0

answered Jan 28, 2021 at 23:53

Carlos L. Rodríguez

255 bronze badges

1 Comment

Sean Ghodrat Over a year ago

You're answer is not clear, it took me about 10 min, I've implemented it but nothing happened.

Collectives™ on Stack Overflow

How to programmatically use bootstrap icons in an angular project?

5 Answers 5

7 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related