How to programmatically use bootstrap icons in an angular project?

user_8652920 0
Viewed 39084

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

enter image description here

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.

enter image description here

bootstrap-4 angular typescript icons
5 Answers

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

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

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

user_147778910
user_30417830

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

user_119484350
Related