@progress/kendo-angular-navigation 11.0.0-develop.110 → 11.0.0-develop.111

package/actionsheet/models/actionsheet-item.interface.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ActionSheetItemGroup } from "./group";
 /**
  * An interface for the ActionSheet items.
@@ -16,6 +17,10 @@ export interface ActionSheetItem {
      * The icon is rendered inside the ActionSheet item by a `span.k-icon` element.
      */
     icon?: string;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the ActionSheet item.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class — or multiple classes separated by spaces —
      * which are applied to a span element inside the ActionSheet item.

package/actionsheet.module.d.ts

@@ -11,6 +11,7 @@ import * as i5 from "./actionsheet/templates/item-template.directive";
 import * as i6 from "./actionsheet/templates/content-template.directive";
 import * as i7 from "./actionsheet/templates/footer-template.directive";
 import * as i8 from "@angular/common";
+import * as i9 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ActionSheet component.
@@ -45,6 +46,6 @@ import * as i8 from "@angular/common";
  */
 export declare class ActionSheetModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ActionSheetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ActionSheetModule, [typeof i1.ActionSheetItemComponent, typeof i2.ActionSheetListComponent, typeof i3.ActionSheetComponent, typeof i4.ActionSheetHeaderTemplateDirective, typeof i5.ActionSheetItemTemplateDirective, typeof i6.ActionSheetContentTemplateDirective, typeof i7.ActionSheetFooterTemplateDirective], [typeof i8.CommonModule], [typeof i3.ActionSheetComponent, typeof i4.ActionSheetHeaderTemplateDirective, typeof i5.ActionSheetItemTemplateDirective, typeof i6.ActionSheetContentTemplateDirective, typeof i7.ActionSheetFooterTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ActionSheetModule, [typeof i1.ActionSheetItemComponent, typeof i2.ActionSheetListComponent, typeof i3.ActionSheetComponent, typeof i4.ActionSheetHeaderTemplateDirective, typeof i5.ActionSheetItemTemplateDirective, typeof i6.ActionSheetContentTemplateDirective, typeof i7.ActionSheetFooterTemplateDirective], [typeof i8.CommonModule, typeof i9.IconsModule], [typeof i3.ActionSheetComponent, typeof i4.ActionSheetHeaderTemplateDirective, typeof i5.ActionSheetItemTemplateDirective, typeof i6.ActionSheetContentTemplateDirective, typeof i7.ActionSheetFooterTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ActionSheetModule>;
 }

package/bottomnavigation/types/bottomnavigation-item.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { SVGIcon } from "@progress/kendo-svg-icons";
 /**
  * An interface for describing the BottomNavigation items ([see example]({% slug items_bottomnavigation %}#toc-itemcontent)).
  */
@@ -18,6 +19,10 @@ export interface BottomNavigationItem {
      * Defines a CSS class or multiple classes separated by spaces, which are applied to a span element inside the item. Allows the usage of custom icons.
      */
     iconClass?: string;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the BottomNavigation item.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies, if the BottomNavigation item is selected.
      */

package/bottomnavigation.module.d.ts

@@ -7,6 +7,7 @@ import * as i1 from "./bottomnavigation/bottomnavigation-item.component";
 import * as i2 from "./bottomnavigation/bottomnavigation.component";
 import * as i3 from "./bottomnavigation/templates/item-template.directive";
 import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the BottomNavigation component.
@@ -40,6 +41,6 @@ import * as i4 from "@angular/common";
  */
 export declare class BottomNavigationModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BottomNavigationModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BottomNavigationModule, [typeof i1.BottomNavigationItemComponent, typeof i2.BottomNavigationComponent, typeof i3.BottomNavigationItemTemplateDirective], [typeof i4.CommonModule], [typeof i2.BottomNavigationComponent, typeof i3.BottomNavigationItemTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BottomNavigationModule, [typeof i1.BottomNavigationItemComponent, typeof i2.BottomNavigationComponent, typeof i3.BottomNavigationItemTemplateDirective], [typeof i4.CommonModule, typeof i5.IconsModule], [typeof i2.BottomNavigationComponent, typeof i3.BottomNavigationItemTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BottomNavigationModule>;
 }

package/breadcrumb/breadcrumb.component.d.ts

@@ -10,6 +10,7 @@ import { BreadCrumbItemModel, BreadCrumbItem } from './models/breadcrumb-item.in
 import { BreadCrumbCollapseMode } from './models/collapse-mode';
 import { BreadCrumbItemTemplateDirective } from './template-directives/item-template.directive';
 import { BreadCrumbListComponent } from './list.component';
+import { SVGIcon } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Breadcrumb component for Angular]({% slug overview_breadcrumb %}).
@@ -54,6 +55,10 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
      * Defines a name of a [built-in icon]({% slug icons %}) in a Kendo UI theme.
      */
     separatorIcon: string;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered as a separator.
+     */
+    separatorSVGIcon: SVGIcon;
     /**
      * Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
      *
@@ -105,5 +110,5 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
     private shouldResize;
     private attachResizeHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadCrumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbComponent, "kendo-breadcrumb", ["kendoBreadCrumb"], { "items": "items"; "separatorIcon": "separatorIcon"; "collapseMode": "collapseMode"; }, { "itemClick": "itemClick"; }, ["itemTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbComponent, "kendo-breadcrumb", ["kendoBreadCrumb"], { "items": "items"; "separatorIcon": "separatorIcon"; "separatorSVGIcon": "separatorSVGIcon"; "collapseMode": "collapseMode"; }, { "itemClick": "itemClick"; }, ["itemTemplate"], never>;
 }

package/breadcrumb/list.component.d.ts

@@ -6,6 +6,7 @@ import { EventEmitter, TemplateRef, QueryList, ElementRef, NgZone, OnDestroy } f
 import { BreadCrumbItemModel, BreadCrumbItem } from './models/breadcrumb-item.interface';
 import { BreadCrumbCollapseMode } from './models/collapse-mode';
 import { BreadCrumbItemComponent } from './breadcrumb-item.component';
+import { SVGIcon } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -17,6 +18,7 @@ export declare class BreadCrumbListComponent implements OnDestroy {
     itemTemplate: TemplateRef<HTMLElement>;
     collapseMode: BreadCrumbCollapseMode;
     separatorIcon: string;
+    separatorSVGIcon: SVGIcon;
     itemClick: EventEmitter<BreadCrumbItem>;
     renderedItems: QueryList<BreadCrumbItemComponent>;
     isRootItemContainer: boolean;
@@ -25,5 +27,5 @@ export declare class BreadCrumbListComponent implements OnDestroy {
     ngOnDestroy(): void;
     private getItemIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadCrumbListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbListComponent, "[kendoBreadCrumbList]", never, { "items": "items"; "itemTemplate": "itemTemplate"; "collapseMode": "collapseMode"; "separatorIcon": "separatorIcon"; }, { "itemClick": "itemClick"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbListComponent, "[kendoBreadCrumbList]", never, { "items": "items"; "itemTemplate": "itemTemplate"; "collapseMode": "collapseMode"; "separatorIcon": "separatorIcon"; "separatorSVGIcon": "separatorSVGIcon"; }, { "itemClick": "itemClick"; }, never, never>;
 }

package/breadcrumb/models/breadcrumb-item.interface.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { SVGIcon } from "@progress/kendo-svg-icons";
 /**
  * @hidden
  */
@@ -38,6 +39,10 @@ export interface BreadCrumbItem {
      * The icon is rendered inside the item by a `span.k-icon element`.
      */
     icon?: string;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the BreadCrumb item.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class—or multiple classes separated by spaces— which are applied to a `span` element inside the item ([see example]({% slug item_appearance_breadcrumb %}#toc-item-icon)).
      * Allows the usage of custom icons.

package/breadcrumb/template-directives/separator.directive.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -13,15 +14,19 @@ export declare class BreadCrumbSeparatorDirective {
     private localization;
     set icon(icon: string);
     get icon(): string;
+    set svgIcon(svgIcon: SVGIcon);
+    get svgIcon(): SVGIcon;
     defaultClasses: boolean;
     ariaHidden: boolean;
     private _icon;
+    private _svgIcon;
     private hasDefaultIcon;
+    private hasDefaultSvgIcon;
     private direction;
     private localizationChangesSubscription;
     constructor(el: ElementRef<HTMLElement>, localization: LocalizationService);
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadCrumbSeparatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BreadCrumbSeparatorDirective, "[kendoBreadCrumbSeparator]", never, { "icon": "icon"; }, {}, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbSeparatorDirective, "[kendoBreadCrumbSeparator]", never, { "icon": "icon"; "svgIcon": "svgIcon"; }, {}, never, never>;
 }

package/breadcrumb.module.d.ts

@@ -10,6 +10,7 @@ import * as i4 from "./breadcrumb/template-directives/item-template.directive";
 import * as i5 from "./breadcrumb/template-directives/separator.directive";
 import * as i6 from "@angular/common";
 import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the BreadCrumb component.
@@ -43,6 +44,6 @@ import * as i7 from "@progress/kendo-angular-common";
  */
 export declare class BreadCrumbModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BreadCrumbModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BreadCrumbModule, [typeof i1.BreadCrumbComponent, typeof i2.BreadCrumbItemComponent, typeof i3.BreadCrumbListComponent, typeof i4.BreadCrumbItemTemplateDirective, typeof i5.BreadCrumbSeparatorDirective], [typeof i6.CommonModule, typeof i7.ResizeSensorModule], [typeof i1.BreadCrumbComponent, typeof i2.BreadCrumbItemComponent, typeof i3.BreadCrumbListComponent, typeof i4.BreadCrumbItemTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BreadCrumbModule, [typeof i1.BreadCrumbComponent, typeof i2.BreadCrumbItemComponent, typeof i3.BreadCrumbListComponent, typeof i4.BreadCrumbItemTemplateDirective, typeof i5.BreadCrumbSeparatorDirective], [typeof i6.CommonModule, typeof i7.ResizeSensorModule, typeof i8.IconsModule], [typeof i1.BreadCrumbComponent, typeof i2.BreadCrumbItemComponent, typeof i3.BreadCrumbListComponent, typeof i4.BreadCrumbItemTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BreadCrumbModule>;
 }

package/esm2020/actionsheet/item.component.mjs

@@ -5,7 +5,8 @@
 import { Component, Input, TemplateRef, HostBinding } from "@angular/core";
 import { isPresent, hexColorRegex } from "../common/util";
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@progress/kendo-angular-icons";
+import * as i2 from "@angular/common";
 /**
  * @hidden
  */
@@ -15,12 +16,6 @@ export class ActionSheetItemComponent {
     }
     manageIconClasses(item) {
         const classes = ['k-actionsheet-item-icon'];
-        if (item.icon) {
-            classes.push(`k-icon k-i-${item.icon}`);
-        }
-        if (item.iconClass) {
-            classes.push(`${item.iconClass}`);
-        }
         const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
         const isThemeColor = isPresent(item.iconColor) && item.iconColor !== '' && !isHexColor;
         if (isThemeColor) {
@@ -52,10 +47,14 @@ ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         <ng-template #defaultTemplate>
             <span class="k-actionsheet-action">
                 <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
-                    <span
+                    <kendo-icon-wrapper
+                        [name]="item.icon"
+                        [customFontClass]="item.iconClass"
                         [class]="manageIconClasses(item)"
-                        [style]="manageIconStyles(item)">
-                    </span>
+                        [svgIcon]="item.svgIcon"
+                        [style]="manageIconStyles(item)"
+                    >
+                    </kendo-icon-wrapper>
                 </span>
                 <span *ngIf="item.title || item.description" class="k-actionsheet-item-text">
                     <span *ngIf="item.title" class="k-actionsheet-item-title">{{item.title}}</span>
@@ -63,7 +62,7 @@ ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 </span>
             </span>
         </ng-template>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -79,10 +78,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #defaultTemplate>
             <span class="k-actionsheet-action">
                 <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
-                    <span
+                    <kendo-icon-wrapper
+                        [name]="item.icon"
+                        [customFontClass]="item.iconClass"
                         [class]="manageIconClasses(item)"
-                        [style]="manageIconStyles(item)">
-                    </span>
+                        [svgIcon]="item.svgIcon"
+                        [style]="manageIconStyles(item)"
+                    >
+                    </kendo-icon-wrapper>
                 </span>
                 <span *ngIf="item.title || item.description" class="k-actionsheet-item-text">
                     <span *ngIf="item.title" class="k-actionsheet-item-title">{{item.title}}</span>

package/esm2020/actionsheet.module.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { ActionSheetComponent } from './actionsheet/actionsheet.component';
 import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from './actionsheet/models';
 import { ActionSheetItemComponent } from './actionsheet/item.component';
@@ -63,16 +64,16 @@ ActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ActionSheetListComponent, ActionSheetComponent, ActionSheetHeaderTemplateDirective,
         ActionSheetItemTemplateDirective,
         ActionSheetContentTemplateDirective,
-        ActionSheetFooterTemplateDirective], imports: [CommonModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
+        ActionSheetFooterTemplateDirective], imports: [CommonModule, IconsModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
         ActionSheetItemTemplateDirective,
         ActionSheetContentTemplateDirective,
         ActionSheetFooterTemplateDirective] });
-ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, imports: [[CommonModule]] });
+ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedModules],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });

package/esm2020/bottomnavigation/bottomnavigation-item.component.mjs

@@ -5,7 +5,8 @@
 import { BottomNavigationItemTemplateDirective } from './templates/item-template.directive';
 import { Component, HostBinding, Input } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@progress/kendo-angular-icons";
+import * as i2 from "@angular/common";
 /**
  * @hidden
  */
@@ -40,14 +41,20 @@ export class BottomNavigationItemComponent {
 BottomNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-hstack": "this.horizontalItemClass", "class.k-vstack": "this.verticalItemClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-selected": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!itemTemplate">
-            <span *ngIf="itemIcon" class="k-bottom-nav-item-icon" [ngClass]="iconClasses"></span>
+            <kendo-icon-wrapper *ngIf="itemIcon"
+                class="k-bottom-nav-item-icon"
+                [name]="item.icon"
+                [customFontClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"
+            >
+            </kendo-icon-wrapper>
             <span *ngIf="item.text" class="k-bottom-nav-item-text">{{item.text}}</span>
         </ng-container>
         <ng-template *ngIf="itemTemplate"
             [ngTemplateOutlet]="itemTemplate?.templateRef"
             [ngTemplateOutletContext]="{ $implicit: item }">
         </ng-template>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -55,7 +62,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: '[kendoBottomNavigationItem]',
                     template: `
         <ng-container *ngIf="!itemTemplate">
-            <span *ngIf="itemIcon" class="k-bottom-nav-item-icon" [ngClass]="iconClasses"></span>
+            <kendo-icon-wrapper *ngIf="itemIcon"
+                class="k-bottom-nav-item-icon"
+                [name]="item.icon"
+                [customFontClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"
+            >
+            </kendo-icon-wrapper>
             <span *ngIf="item.text" class="k-bottom-nav-item-text">{{item.text}}</span>
         </ng-container>
         <ng-template *ngIf="itemTemplate"

package/esm2020/bottomnavigation.module.mjs

@@ -7,6 +7,7 @@ import { BottomNavigationItemTemplateDirective } from './bottomnavigation/templa
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BottomNavigationComponent } from './bottomnavigation/bottomnavigation.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const templateDirectives = [BottomNavigationItemTemplateDirective];
 const exportedComponents = [BottomNavigationComponent, ...templateDirectives];
@@ -45,13 +46,13 @@ const declarations = [BottomNavigationItemComponent, ...exportedComponents];
 export class BottomNavigationModule {
 }
 BottomNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BottomNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, declarations: [BottomNavigationItemComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective], imports: [CommonModule], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
-BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, imports: [[CommonModule]] });
+BottomNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, declarations: [BottomNavigationItemComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective], imports: [CommonModule, IconsModule], exports: [BottomNavigationComponent, BottomNavigationItemTemplateDirective] });
+BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedComponents],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });

package/esm2020/breadcrumb/breadcrumb-item.component.mjs

@@ -6,7 +6,8 @@ import { Component, Input, ElementRef, TemplateRef, HostBinding } from '@angular
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { outerWidth } from '../common/util';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@progress/kendo-angular-icons";
+import * as i2 from "@angular/common";
 /**
  * @hidden
  */
@@ -67,8 +68,12 @@ BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 class="k-cursor-pointer k-flex-none"
             >
                 <img *ngIf="item.data.imageUrl" (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
-                <span *ngIf="item.data.icon && !item.data.iconClass" class="k-icon k-i-{{ item.data.icon }}"></span>
-                <span *ngIf="item.data.iconClass" class="{{ item.data.iconClass }}"></span>
+                <kendo-icon-wrapper *ngIf="item.data.icon || item.data.iconClass"
+                    [name]="item.data.icon"
+                    [customFontClass]="item.data.iconClass"
+                    [svgIcon]="item.data.svgIcon"
+                >
+                </kendo-icon-wrapper>
                 {{ item.data.text }}
             </span>
             <ng-template
@@ -84,7 +89,7 @@ BreadCrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-container *ngIf="collapseMode !== 'wrap'">
             <ng-container *ngTemplateOutlet="separator"></ng-container>
         </ng-container>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -116,8 +121,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 class="k-cursor-pointer k-flex-none"
             >
                 <img *ngIf="item.data.imageUrl" (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
-                <span *ngIf="item.data.icon && !item.data.iconClass" class="k-icon k-i-{{ item.data.icon }}"></span>
-                <span *ngIf="item.data.iconClass" class="{{ item.data.iconClass }}"></span>
+                <kendo-icon-wrapper *ngIf="item.data.icon || item.data.iconClass"
+                    [name]="item.data.icon"
+                    [customFontClass]="item.data.iconClass"
+                    [svgIcon]="item.data.svgIcon"
+                >
+                </kendo-icon-wrapper>
                 {{ item.data.text }}
             </span>
             <ng-template

package/esm2020/breadcrumb/breadcrumb.component.mjs

@@ -185,7 +185,7 @@ export class BreadCrumbComponent {
     }
 }
 BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.dir": "this.getDir" } }, providers: [
+BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.dir": "this.getDir" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -201,6 +201,7 @@ BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [itemTemplate]="itemTemplate?.templateRef"
             [collapseMode]="collapseMode"
             [separatorIcon]="separatorIcon"
+            [separatorSVGIcon]="separatorSVGIcon"
             (itemClick)="itemClick.emit($event)"
         ></ol>
         <ol
@@ -211,11 +212,12 @@ BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [itemTemplate]="itemTemplate?.templateRef"
             [collapseMode]="collapseMode"
             [separatorIcon]="separatorIcon"
+            [separatorSVGIcon]="separatorSVGIcon"
             (itemClick)="itemClick.emit($event)"
             [ngClass]="{ 'k-flex-wrap': collapseMode === 'wrap', 'k-flex-none': collapseMode === 'none' }"
         ></ol>
         <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: i2.BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon"], outputs: ["itemClick"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i4.AsyncPipe } });
+    `, isInline: true, components: [{ type: i2.BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon", "separatorSVGIcon"], outputs: ["itemClick"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i4.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbComponent, decorators: [{
             type: Component,
             args: [{
@@ -238,6 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [itemTemplate]="itemTemplate?.templateRef"
             [collapseMode]="collapseMode"
             [separatorIcon]="separatorIcon"
+            [separatorSVGIcon]="separatorSVGIcon"
             (itemClick)="itemClick.emit($event)"
         ></ol>
         <ol
@@ -248,6 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [itemTemplate]="itemTemplate?.templateRef"
             [collapseMode]="collapseMode"
             [separatorIcon]="separatorIcon"
+            [separatorSVGIcon]="separatorSVGIcon"
             (itemClick)="itemClick.emit($event)"
             [ngClass]="{ 'k-flex-wrap': collapseMode === 'wrap', 'k-flex-none': collapseMode === 'none' }"
         ></ol>
@@ -258,6 +262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], separatorIcon: [{
                 type: Input
+            }], separatorSVGIcon: [{
+                type: Input
             }], collapseMode: [{
                 type: Input
             }], itemClick: [{

package/esm2020/breadcrumb/list.component.mjs

@@ -12,8 +12,8 @@ import { closestItem, itemIndex } from '../common/dom-queries';
 import { isPresent } from '../common/util';
 import * as i0 from "@angular/core";
 import * as i1 from "./breadcrumb-item.component";
-import * as i2 from "@angular/common";
-import * as i3 from "./template-directives/separator.directive";
+import * as i2 from "./template-directives/separator.directive";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
@@ -48,7 +48,7 @@ export class BreadCrumbListComponent {
     }
 }
 BreadCrumbListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: { items: "items", itemTemplate: "itemTemplate", collapseMode: "collapseMode", separatorIcon: "separatorIcon" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "renderedItems", predicate: BreadCrumbItemComponent, descendants: true }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let item of items; let i = index; let isFirst = first; let isLast = last\">\n            <li\n                #renderedItem\n                kendoBreadCrumbItem\n                *ngIf=\"!(collapseMode === 'wrap' && isFirst) || isRootItemContainer\"\n                [attr.data-kendo-breadcrumb-index]=\"i\"\n                [item]=\"item\"\n                [index]=\"i\"\n                [collapseMode]=\"collapseMode\"\n                [itemTemplate]=\"itemTemplate\"\n            >\n                <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" *ngIf=\"collapseMode === 'wrap' && !isFirst\"></span>\n                <span\n                    kendoBreadCrumbSeparator\n                    [icon]=\"separatorIcon\"\n                    *ngIf=\"collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)\"\n                ></span>\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i1.BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon"] }] });
+BreadCrumbListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: { items: "items", itemTemplate: "itemTemplate", collapseMode: "collapseMode", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "renderedItems", predicate: BreadCrumbItemComponent, descendants: true }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let item of items; let i = index; let isFirst = first; let isLast = last\">\n            <li\n                #renderedItem\n                kendoBreadCrumbItem\n                *ngIf=\"!(collapseMode === 'wrap' && isFirst) || isRootItemContainer\"\n                [attr.data-kendo-breadcrumb-index]=\"i\"\n                [item]=\"item\"\n                [index]=\"i\"\n                [collapseMode]=\"collapseMode\"\n                [itemTemplate]=\"itemTemplate\"\n            >\n                <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" *ngIf=\"collapseMode === 'wrap' && !isFirst\"></span>\n                <span\n                    kendoBreadCrumbSeparator\n                    [icon]=\"separatorIcon\"\n                    [svgIcon]=\"separatorSVGIcon\"\n                    *ngIf=\"collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)\"\n                ></span>\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i1.BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { type: i2.BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbListComponent, decorators: [{
             type: Component,
             args: [{
@@ -70,6 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 <span
                     kendoBreadCrumbSeparator
                     [icon]="separatorIcon"
+                    [svgIcon]="separatorSVGIcon"
                     *ngIf="collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)"
                 ></span>
             </li>
@@ -84,6 +85,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], separatorIcon: [{
                 type: Input
+            }], separatorSVGIcon: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }], renderedItems: [{

package/esm2020/breadcrumb/template-directives/separator.directive.mjs

@@ -2,13 +2,17 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, HostBinding, Input, ElementRef } from '@angular/core';
+import { HostBinding, Input, ElementRef, Component } from '@angular/core';
 import { isPresent } from '../../common/util';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { chevronRightIcon, chevronLeftIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-icons";
 const DEFAULT_ICON = 'chevron-right';
 const DEFAULT_RTL_ICON = 'chevron-left';
+const DEFAULT_SVG_ICON = chevronRightIcon;
+const DEFAULT_RTL_SVG_ICON = chevronLeftIcon;
 /**
  * @hidden
  */
@@ -22,8 +26,6 @@ export class BreadCrumbSeparatorDirective {
         this.direction = this.localization.rtl ? 'rtl' : 'ltr';
     }
     set icon(icon) {
-        const element = this.el.nativeElement;
-        element.classList.remove(`k-i-${this._icon}`);
         if (isPresent(icon)) {
             this._icon = icon;
             this.hasDefaultIcon = false;
@@ -32,32 +34,62 @@ export class BreadCrumbSeparatorDirective {
             this._icon = this.direction === 'ltr' ? DEFAULT_ICON : DEFAULT_RTL_ICON;
             this.hasDefaultIcon = true;
         }
-        element.classList.add(`k-i-${this._icon}`);
     }
     get icon() {
         return this._icon;
     }
+    set svgIcon(svgIcon) {
+        if (isPresent(svgIcon)) {
+            this._svgIcon = svgIcon;
+            this.hasDefaultSvgIcon = false;
+        }
+        else {
+            this._svgIcon = this.direction === 'ltr' ? DEFAULT_SVG_ICON : DEFAULT_RTL_SVG_ICON;
+            this.hasDefaultSvgIcon = true;
+        }
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     ngOnInit() {
         this.localizationChangesSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             if (this.hasDefaultIcon) {
                 this.icon = undefined;
             }
+            if (this.hasDefaultSvgIcon) {
+                this.svgIcon = undefined;
+            }
         });
     }
     ngOnDestroy() {
         this.localizationChangesSubscription.unsubscribe();
     }
 }
-BreadCrumbSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-BreadCrumbSeparatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon" }, host: { properties: { "class.k-breadcrumb-delimiter-icon": "this.defaultClasses", "class.k-icon": "this.defaultClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0 });
+BreadCrumbSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbSeparatorDirective, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbSeparatorDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: { icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "class.k-breadcrumb-delimiter-icon": "this.defaultClasses", "class.k-icon": "this.defaultClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            [name]="icon"
+            [svgIcon]="svgIcon"
+        >
+        </kendo-icon-wrapper>
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbSeparatorDirective, decorators: [{
-            type: Directive,
+            type: Component,
             args: [{
-                    selector: '[kendoBreadCrumbSeparator]'
+                    selector: '[kendoBreadCrumbSeparator]',
+                    template: `
+        <kendo-icon-wrapper
+            [name]="icon"
+            [svgIcon]="svgIcon"
+        >
+        </kendo-icon-wrapper>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }]; }, propDecorators: { icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], defaultClasses: [{
                 type: HostBinding,
                 args: ['class.k-breadcrumb-delimiter-icon']