angulartypescriptbootstrap-4icons

How to programmatically use bootstrap icons in an angular project?


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


Solution

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