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.

Solution 1

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>

Solution 2

*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">

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

Comments

[notacorn]

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]

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

[Ali.Ghodrat]

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

[Reez0]

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

[jwanglof]

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