Add Icon

[lenichols]

How would i add an icon to the first li in the list?

[udayvunnam]

We don't have that ability right now. I will add this feature 👍

[udayvunnam]

@lenichols Let me know what type of icon you would be planning to add

[lenichols]

I ended up using CSS :before and "content" property with FontAwesome to add it but it would be nice to add that feat. @udayvunnam

[udayvunnam]

@lenichols -- Good news. I have added this ability to provide custom icons.

With latest xng-breadcrumb release, you can provide custom template for breadcrumb, where you can add icons and change text as you wish.

Refer - https://github.com/udayvunnam/xng-breadcrumb#customize-breadcrumb-template-add-icons-change-text-i18n

How to add icons ?

• define info associated with breadcrumb in route config.
• info is available in template context of *xngBreadcrumbItem .

  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    data: {
      breadcrumb: {
        label: 'app home',
        info: 'home'
      }
    }
  }

<xng-breadcrumb>
  <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info;>
    <mat-icon *ngIf="info">{{ info }}</mat-icon>
    <ng-container >{{ breadcrumb }}</ng-container>
  </ng-container>
</xng-breadcrumb>

xng-breadcrumb@4.0.0(Angular 6, 7) or xng-breadcrumb@5.0.0 (Angular 8+)

[udayvunnam]

If you just want to add icon to first li, do as below

    <xng-breadcrumb [separator]="separatorTemplate">
      <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
        <mat-icon *ngIf="info && first">{{ info }}</mat-icon>
        <ng-container *ngIf="!first">{{ breadcrumb | titlecase }}</ng-container>
      </ng-container>
    </xng-breadcrumb>