How To Use Bootstrap Icons In Angular?

The most popular framework for making responsive and mobile-friendly websites is called Bootstrap. They include forms, typography, buttons, tables, navigation, modals, and picture carousels etc.

These are built using CSS and HTML. It also supports plugins written in JavaScript. It provides the process of creating responsive designs.

What is a Bootstrap Icon?

Bootstrap icons are a set of symbols that you can use to represent actions on your website. Bootstrap icons are created using HTML, CSS, and JavaScript in combination. By doing this, developers can add visuals to their apps more quickly and easily than if they had to start from scratch. These icons are customizable as you can change their size, colour, and other properties in order to match your site's design.

Prerequisites

• HTML
• CSS
• JavaScript

Approach

• Install Bootstrap and add Bootstrap CDN link in style.css file in your angular application.
• We will be making User Card in order to explain boostrap icons which will be opened up on clicking on + sign.

Steps to Use Bootstrap in Angular

Step 1: Create a New Angular Application

ng new  bootstrap

Step 2: Install the required packages in your project using the following command.

npm install bootstrap bootstrap-icons

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/platform-server": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@angular/ssr": "^18.2.0",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
}

Step 3: Import bootstrap icon in style.css file

@import "bootstrap-icons/font/bootstrap-icons.css";

Example:

Below is an example of adding bootstrap icons and action on icons(with dynamically change) in angular.

App Component

Below mentioned is code example demonstrating App Component having email,phone, location as information of user followed by app.component.css which helps in styling the User Card.

<!-- src/app/app.component.html -->
<div class="container mt-3">
    <i (click)="toggleBox()" [ngClass]="{'bi-plus': !isBoxOpen, 'bi-dash': isBoxOpen}"
        [ngStyle]="{'transform': isBoxOpen ? 'rotate(45deg)' : 'rotate(0deg)'}"></i>
    <div class="card" style="width: 18rem;" *ngIf="isBoxOpen">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <i class="bi bi-person-circle me-3" style="font-size: 2rem;"></i>
                <h5 class="card-title">{{ user.name }}</h5>
            </div>
            <p class="card-text">
                <i class="bi bi-envelope-fill me-2"></i> {{ user.email }}
            </p>
            <p class="card-text">
                <i class="bi bi-telephone-fill me-2"></i> {{ user.phone }}
            </p>
            <p class="card-text">
                <i class="bi bi-geo-alt-fill me-2"></i> {{ user.location }}
            </p>
            <a href="#" class="btn btn-primary">
                <i class="bi bi-person-lines-fill me-2"></i> Contact
            </a>
        </div>
    </div>



</div>

/* src/app/app.component.css */
.card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-body {
    padding: 20px;
}

.card-title {
    margin: 0;
    font-size: 1.5rem;
}

//src/app/app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, CommonModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'bootstrap';
    user = {
        name: 'John Doe',
        email: '[email protected]',
        phone: '+1 234 567 890',
        location: 'New York, USA'
    };
    isBoxOpen = false;

    toggleBox() {
        this.isBoxOpen = !this.isBoxOpen;
    }
}

Output: