In this tutorial, You are about to learn how to add bootstrap-icons to angular application.

Angular 13 Bootstrap-icons Example

  • Step 1 Create Angular Application
  • Step 2 Install bootstrap-icon dependency
  • Step 3 add bootstrap icon web font class selector
  • Step 4 Add bootstrap icon SVG to angular application

Create Angular Application

If you don’t have angular application already, Don’t worry, You can create a brand new application using below code

ng new angular-bootstrap-icons

Change to application folder

cd angular-bootstrap-icons

Install bootstrap-icon dependency

Add the bootstrap-icon dependency by using below command

npm install bootstrap-icons --save

This adds dependency entry in package.json file

Bootstrap icons are added using class names as well as svg directly

How to add bootstrap icon class selector in Angular application

In this example, using search icon web font for this icon is

<i class="bi bi-search"></i>

bi-search is an icon name for search icon

Let’s add icons to angular component using class selector

In this component, Added search icon to button intput text form app.component.html

<h3>Bootstrap Icons class Angular Button and Input form example</h3>
<button type="button" class="btn btn-primary">
  <i class="bi bi-search"></i>

  Button
</button>
<div class="input-group w-50">
  <span class="input-group-text" id="basic-addon1">
    <i class="bi bi-search"></i>

  </span>
  <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example"
    aria-describedby="basic-addon1">
</div>

Integrate bootstrap icon using svg in Angular components

bootstrap icons provides another way to integrate svg icons directly into an application.

Add bootstrap-icons path to assets section in angular.json

 "assets": [

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

Here is an SVG icon for search

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
    viewBox="0 0 16 16">
    <path
      d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
    </path>
  </svg>

Let’s add svg into angular component to button and input text

app.component.html:

  <h3>Bootstrap Angular SVG Button and Input form example</h3>
<button type="button" class="btn btn-primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
    viewBox="0 0 16 16">
    <path
      d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
    </path>
  </svg>
  Button
</button>
<div class="input-group w-50">
  <span class="input-group-text" id="basic-addon1">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
      viewBox="0 0 16 16">
      <path
        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
      </path>
    </svg>
  </span>
  <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example"
    aria-describedby="basic-addon1">
</div>