Add font awesome in Angular Toolbar component

22 Sep 20253 minutes to read

You can customize the Toolbar component items by using third-party icons other than the icons available in the Syncfusion® library. In the following example, Font Awesome icons are used as toolbar items.

  • Refer to the third-party reference link. Here, the CDN link of Font Awesome is referenced.

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

  • Add the icons to the toolbar component using the prefixIcon property. This property allows you to specify the CSS class name of the third-party icon that will be displayed before the text in each toolbar item.

The following sample explains how to use Font Awesome icons in the toolbar component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'



import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
         ToolbarModule
    ],


standalone: true,
    selector: 'app-container',
    template: `
        <ejs-toolbar>
          <e-items>
          <e-item prefixIcon="fa fa-twitter"></e-item>
          <e-item prefixIcon="fa fa-facebook"></e-item>
          <e-item prefixIcon="fa fa-whatsapp"></e-item>
          <e-item
          template='<button class="e-btn e-tbar-btn"><span><i style="font-size: 3em !important; color: Tomato" class="e-icons fa fa-twitter"></i></span></button>'></e-item>
          </e-items>
       </ejs-toolbar>`
})

export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Templates can also be used for rendering icons based on specific requirements, providing greater flexibility for complex icon scenarios.

Icon customization

The class “e-icons” is used for standardizing the appearance of the icons to fit into toolbar items. You can override the appearance of the icons by using the following CSS classes in your component’s stylesheet or global styles.

Use the following CSS to set the color of icons.

    .e-toolbar .e-icons {
        color: #e3165b !important;
    }

Use the following CSS to set the font size of icons.

    .e-toolbar .e-btn .e-icons.e-btn-icon {
        font-size: 14px !important;
    }