Different libraries of adding Angular icons ?

In this article, we’ll explore different available libraries for adding Angular icons to our project. We have seen icons are extensively used in many applications. We can easily add an icon to our Angular project. To use icons in Angular we have to dependent other libraries, as Angular core doesn’t provide icons.

In this tutorial, we will disucss some three different libraries to add Angular icon. We’ll demonstrate examples of Angular of these libraries. So let’s get started.

3 Best Angular icon libraries

We’ll learn some of the most popular and used icon libraries. We had a list below, in which you can select icon library based on your UI and requirement.

I personally chose icons based on UI. For eg Angular material icon for Angular material UI and bootstrap-icon for Angular bootstrap UI. I select Font awesome only if I’m not using any UI.

Setting up and configure Angular icons project

Let first create our Angular icons project, we’ll first demonstrate the bootstrap-icon library. Before starting an angular project you need to install nodejs and Angular CLI in your system.

ng new iconApp
cd iconApp
npm i bootstrap-icons --save

Our first icon example is based on Bootstrap UI, let add ng-bootstrap to our Angular project.

ng add @ng-bootstrap/ng-bootstrap

The above command will install bootstrap and add NgbModule automatically in our app.module.ts file. We can use our ng-bootstrap component directly in our angular project without any further configuration like importing bootstrap CSS in our project.

While installing bootstrap-icon, we need to import its font style in our style.scss as below.

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-icons/font/bootstrap-icons';

No need to add the first import, it will add automatically by imported bootstrap style to our Angular project.

Angular icons example using bootstrap-icons

We’ll demonstrate Angular icons example using third-party library the bootstrap-icon. Here we have a screenshot of the bootstrap icon.

<h4>Angular icon using bootstrap-icon</h4>
<i class="bi bi-bar-chart"></i>
<i class="bi bi-bar-chart" style="color: blue; font-size: 2rem;"></i><br>

<i class="bi bi-github" style="font-size: 2rem;"></i>
<i class="bi bi-facebook" style="color: blue; font-size: 2rem;"></i>
<i class="bi bi-whatsapp" style="color: greenyellow; font-size: 2rem;"></i>
<i class="bi bi-twitter" style="color:steelblue; font-size: 2rem;"></i>

The bootstrap icon allows us to use both web font and SVG. For example, above, we have to use web font, and to use Twitter SVG we can use it like this.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="blue" class="bi bi-twitter" viewBox="0 0 16 16">
    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>

We can easily change Angular icon color and angular icon size by applying style on icon elements.

Angular icons list

The bootstrap-icon library provides a frees, high-quality, open-source Angular icons list with over 1,500 icons. Include them any way you like—SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project.

We have taken a screenshot of the bootstrap-icon list and checked more icons on it in an official document.

Angular icons example using Font awesome library

The Font-awesome is a Webfont used by web and application developers for icons instead of traditional old image icons. Font-awesome gives us abilities to scalable vector icons that can be easily customized in terms of size, color, drop shadow, and anything that can be done with the power of CSS.

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons
npm i --save fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-solid-svg-icons

Once we had installed the font-awesome library, we need to import its module in the app.module.ts file as below.

import { NgModule } from '@angular/core';
.....
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faSun as farSun, faStar as farStar, faMoon as farMoon} from '@fortawesome/free-regular-svg-icons';
import { faSun as fasSun, faStar as fasStar, faMoon as fasMoon } from '@fortawesome/free-solid-svg-icons';
import { faStackOverflow, faGithub, faFacebook } from '@fortawesome/free-brands-svg-icons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(fasSun, fasStar, fasMoon, farSun, farMoon, farStar, 
       faStackOverflow, faGithub, faFacebook);
  }
 }

<div class="fontAwesome">
  <h4>Fontawesome icon</h4>
  <fa-icon [icon]="['fas', 'sun']"></fa-icon>
  <fa-icon [icon]="['far', 'sun']"></fa-icon>
  <fa-icon [icon]="['fab', 'facebook']"></fa-icon>
</div>

Angular material icon

Last, we’ll demonstrate an example of an Angular material icon, let install and add Angular material into our Angular project.

Before we used the Angular material icon we need to import the Angular material icon and button module in our application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon'
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let add a material icon to our app component template.

<section>
  <mat-icon color="primary">commute</mat-icon>
  <mat-icon color="accent">euro_symbol</mat-icon>

  <h2>Angular material button with icon and text</h2>
  <button mat-button>
    <mat-icon>mic</mat-icon> Start Recording
  </button>

  <button mat-raised-button color="accent">
    <mat-icon>mic</mat-icon> Start Recording
  </button>
  <button mat-stroked-button color="accent">
    <mat-icon>mic</mat-icon> Start Recording
  </button>
  <button mat-flat-button color="accent">
    <mat-icon>mic</mat-icon> Start Recording
  </button>
</section>

To get the angular material icon name, check the Angular icon list on the Google icons and an example of the Google delete icon we have.

<span class="material-icons">delete</span>
// To change it to material icon replace span with mat-icon 

<mat-icon color="primary">delete</mat-icon>

Conclusion
We have completed our Angular icons example. In Angular, we can use libraries like bootstrap-icon, font-awesome, and material icons for the Angular projects.

Related Articles

• How to implement bootstrap in angular 12?
• How to add Angular signature pad in Angular 11 ?
• How to install Angular material ?
• How to implement CKEditor in Angular ?