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.

Answer 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>

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