Icons in Angular Breadcrumb component

27 Apr 202414 minutes to read

The Breadcrumb component contains an icon/image to provide a visual representation of an item.

Loading icon in BreadcrumbItem

To load the icon on the breadcrumb item, set the iconCss property.

Breadcrumb with Font Icon

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

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 for the items using the iconCss property. In the following example, an image was added to the breadcrumb item by using the iconCss class e-image-home and specifying height and width.

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 image can be added for the items using the iconCss property. In the following example, SVG image was added to the breadcrumb item by using the iconCss class e-svg-home and specifying height and width.

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, the icon is positioned to the left side of the item in the Breadcrumb component. If you need to add the icon right to the breadcrumb item, add the e-icon-right class to the required item. In the following example, the e-icon-right class was added to the 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 the items, add icons using the iconCss property. In the following example, breadcrumb items were 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 show icon only for the first item in the Breadcrumb component, add icons to the first item using the iconCss property. In the following example, the icon was 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));