Icons in Angular Breadcrumb component

27 Aug 202514 minutes to read

The Breadcrumb component supports icons and images to provide visual representation and enhance navigation context for each item. Icons can be implemented using font icons, custom images, or SVG graphics through the iconCss property, with flexible positioning options to suit different design requirements.

Loading icon in Breadcrumb items

To load icons on breadcrumb items, configure the iconCss property with the appropriate CSS class or styling.

Breadcrumb with Font Icon

To place font icons on breadcrumb items, set the iconCss property to e-icons with the required icon CSS class. By default, icons are positioned to the left side of the item text.

app.component.ts

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



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb with items. -->
            <ejs-breadcrumb [enableNavigation]="false">
                <e-breadcrumb-items>
                    <e-breadcrumb-item iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/breadcrumb/default"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
                </e-breadcrumb-items>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}

main.ts

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

Breadcrumb with Image

In the Breadcrumb component, images can be added to items using the iconCss property. In the following example, an image is added to the breadcrumb item using the iconCss class e-image-home with specified height and width dimensions.

app.component.ts

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



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render Breadcrumb with items. -->
            <ejs-breadcrumb [enableNavigation]="false">
                <e-breadcrumb-items>
                    <e-breadcrumb-item iconCss="e-image-home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/breadcrumb/default"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
                </e-breadcrumb-items>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}

main.ts

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

Breadcrumb with SVG Image

In the Breadcrumb component, SVG images can be added to items using the iconCss property. In the following example, an SVG image is added to the breadcrumb item using the iconCss class e-svg-home with specified height and width dimensions.

app.component.ts

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



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render Breadcrumb with items. -->
            <ejs-breadcrumb [enableNavigation]="false">
                <e-breadcrumb-items>
                    <e-breadcrumb-item iconCss="e-svg-home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/breadcrumb/default"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
                </e-breadcrumb-items>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}

main.ts

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

Icon Position

By default, icons are positioned to the left side of the item text in the Breadcrumb component. To position icons to the right of breadcrumb items, add the e-icon-right class to the required item. In the following example, the e-icon-right class is added to breadcrumb items using the beforeItemRender event.

app.component.ts

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



import { Component } from '@angular/core';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <div id="breadcrumb-control" class="control-section">
                <div class="header"><b>Icon Position - Left</b></div><br />
                <ejs-breadcrumb [enableNavigation]="false">
                    <e-breadcrumb-items>
                        <e-breadcrumb-item iconCss="e-bicons e-folder" text="Program Files"></e-breadcrumb-item>
                        <e-breadcrumb-item iconCss="e-bicons e-folder" text="Services"></e-breadcrumb-item>
                        <e-breadcrumb-item iconCss="e-bicons e-file" text="Config.json"></e-breadcrumb-item>
                    </e-breadcrumb-items>
                </ejs-breadcrumb>
                <br /><br/>
                <div class="header"><b>Icon Position - Right</b></div><br />
                    <ejs-breadcrumb [enableNavigation]="false" (beforeItemRender)="beforeItemRenderHandler($event)">
                    <e-breadcrumb-items>
                        <e-breadcrumb-item iconCss="e-bicons e-folder" text="Program Files"></e-breadcrumb-item>
                        <e-breadcrumb-item iconCss="e-bicons e-folder" text="Services"></e-breadcrumb-item>
                        <e-breadcrumb-item iconCss="e-bicons e-file" text="Config.json"></e-breadcrumb-item>
                    </e-breadcrumb-items>
                </ejs-breadcrumb>
            </div>
            </div>`
})

export class AppComponent {
    public beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
        if(args.item.text !== '') {
            args.element.classList.add('e-icon-right');
        }
    }
}

main.ts

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

Icon Only

To display only icons for items without text, add icons using the iconCss property while omitting the text property. In the following example, breadcrumb items are demonstrated with only icons by providing the iconCss property.

app.component.ts

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



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb. -->
            <ejs-breadcrumb [enableNavigation]="false">
                <e-breadcrumb-items>
                   <e-breadcrumb-item iconCss="e-icons e-home"></e-breadcrumb-item>
                   <e-breadcrumb-item iconCss="e-bicons e-folder"></e-breadcrumb-item>
                   <e-breadcrumb-item iconCss="e-bicons e-file"></e-breadcrumb-item>
                </e-breadcrumb-items>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}

main.ts

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

Show icon only for first item

To display an icon only for the first item in the Breadcrumb component, add icons to the first item using the iconCss property while leaving other items without icons. In the following example, the icon is provided only for the first item by setting the iconCss property.

app.component.ts

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



import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
imports: [ BreadcrumbModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Breadcrumb with items. -->
            <ejs-breadcrumb [enableNavigation]="false">
                <e-breadcrumb-items>
                    <e-breadcrumb-item iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/angular.html"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/angular/demos/#/material/breadcrumb/default"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Breadcrumb" url="./breadcrumb/default"></e-breadcrumb-item>
                </e-breadcrumb-items>
            </ejs-breadcrumb>
            </div>`
})

export class AppComponent {}

main.ts

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