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

package/fesm2020/progress-kendo-angular-navigation.mjs

@@ -9,10 +9,13 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i3 from '@progress/kendo-angular-common';
 import { closestInScope as closestInScope$1, isDocumentAvailable, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
-import * as i1$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { filter, map, startWith, share } from 'rxjs/operators';
+import * as i1$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { chevronRightIcon, chevronLeftIcon } from '@progress/kendo-svg-icons';
 
 /**
  * @hidden
@@ -21,7 +24,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673548761,
+    publishDate: 1673607373,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -494,8 +497,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
@@ -511,7 +518,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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1$1.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: [{
@@ -543,8 +550,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
@@ -607,6 +618,8 @@ const closestItem = (target, targetAttr, scope) => closestInScope(target, target
 
 const DEFAULT_ICON = 'chevron-right';
 const DEFAULT_RTL_ICON = 'chevron-left';
+const DEFAULT_SVG_ICON = chevronRightIcon;
+const DEFAULT_RTL_SVG_ICON = chevronLeftIcon;
 /**
  * @hidden
  */
@@ -620,8 +633,6 @@ 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;
@@ -630,32 +641,62 @@ 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: i1$1.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']
@@ -701,7 +742,7 @@ 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: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: 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: BreadCrumbItemComponent, selector: "[kendoBreadCrumbItem]", inputs: ["item", "collapseMode", "index", "itemTemplate"] }, { type: BreadCrumbSeparatorDirective, selector: "[kendoBreadCrumbSeparator]", inputs: ["icon", "svgIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.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: [{
@@ -723,6 +764,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>
@@ -737,6 +779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], separatorIcon: [{
                 type: Input
+            }], separatorSVGIcon: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }], renderedItems: [{
@@ -930,7 +974,7 @@ 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,
@@ -946,6 +990,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
@@ -956,11 +1001,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: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon"], outputs: ["itemClick"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
+    `, isInline: true, components: [{ type: BreadCrumbListComponent, selector: "[kendoBreadCrumbList]", inputs: ["items", "itemTemplate", "collapseMode", "separatorIcon", "separatorSVGIcon"], outputs: ["itemClick"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i2.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbComponent, decorators: [{
             type: Component,
             args: [{
@@ -983,6 +1029,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
@@ -993,6 +1040,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>
@@ -1003,6 +1051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], separatorIcon: [{
                 type: Input
+            }], separatorSVGIcon: [{
+                type: Input
             }], collapseMode: [{
                 type: Input
             }], itemClick: [{
@@ -1082,16 +1132,16 @@ class BreadCrumbModule {
 BreadCrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 BreadCrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbModule, declarations: [BreadCrumbComponent,
         BreadCrumbItemComponent,
-        BreadCrumbListComponent, BreadCrumbItemTemplateDirective, BreadCrumbSeparatorDirective], imports: [CommonModule, ResizeSensorModule], exports: [BreadCrumbComponent,
+        BreadCrumbListComponent, BreadCrumbItemTemplateDirective, BreadCrumbSeparatorDirective], imports: [CommonModule, ResizeSensorModule, IconsModule], exports: [BreadCrumbComponent,
         BreadCrumbItemComponent,
         BreadCrumbListComponent, BreadCrumbItemTemplateDirective] });
-BreadCrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbModule, imports: [[CommonModule, ResizeSensorModule]] });
+BreadCrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbModule, imports: [[CommonModule, ResizeSensorModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$2],
                     exports: [exportedModules$1],
-                    imports: [CommonModule, ResizeSensorModule]
+                    imports: [CommonModule, ResizeSensorModule, IconsModule]
                 }]
         }] });
 
@@ -1150,14 +1200,20 @@ 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i1$1.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: [{
@@ -1165,7 +1221,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"
@@ -1493,7 +1555,7 @@ BottomNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             provide: L10N_PREFIX,
             useValue: 'kendo.bottomnavigation'
         }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        <ng-container *ngIf=\"items\">\n            <span kendoBottomNavigationItem\n                *ngFor=\"let item of items; let idx=index\"\n                role=\"link\"\n                class=\"k-bottom-nav-item\"\n                [disabledComponent]=\"disabled\"\n                [item]=\"item\"\n                [index]=\"idx\"\n                [selectedIdx]=\"selectedIdx\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-bottomnavigation-index]=\"idx\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [orientation]=\"itemFlow\">\n            </span>\n        </ng-container>\n    ", isInline: true, components: [{ type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        <ng-container *ngIf=\"items\">\n            <span kendoBottomNavigationItem\n                *ngFor=\"let item of items; let idx=index\"\n                role=\"link\"\n                class=\"k-bottom-nav-item\"\n                [disabledComponent]=\"disabled\"\n                [item]=\"item\"\n                [index]=\"idx\"\n                [selectedIdx]=\"selectedIdx\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-bottomnavigation-index]=\"idx\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [orientation]=\"itemFlow\">\n            </span>\n        </ng-container>\n    ", isInline: true, components: [{ type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -1604,14 +1666,14 @@ const declarations$1 = [BottomNavigationItemComponent, ...exportedComponents];
 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$1],
                     exports: [exportedComponents],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });
 
@@ -1714,12 +1776,6 @@ 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) {
@@ -1751,10 +1807,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>
@@ -1762,7 +1822,7 @@ ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 </span>
             </span>
         </ng-template>
-    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i1$1.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: [{
@@ -1778,10 +1838,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>
@@ -1847,7 +1911,7 @@ class ActionSheetListComponent {
     }
 }
 ActionSheetListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n            <span *ngFor=\"let item of groupItems\" kendoActionSheetItem\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-disabled]=\"item.disabled\"\n                [class.k-actionsheet-item]=\"true\"\n                [attr.kendo-actionsheet-item-index]=\"setAttrIndex(item)\"\n                [class.k-disabled]=\"item.disabled\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [itemTemplate]=\"itemTemplate\"\n                [item]=\"item\">\n            </span>\n    ", isInline: true, components: [{ type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ActionSheetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n            <span *ngFor=\"let item of groupItems\" kendoActionSheetItem\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-disabled]=\"item.disabled\"\n                [class.k-actionsheet-item]=\"true\"\n                [attr.kendo-actionsheet-item-index]=\"setAttrIndex(item)\"\n                [class.k-disabled]=\"item.disabled\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [itemTemplate]=\"itemTemplate\"\n                [item]=\"item\">\n            </span>\n    ", isInline: true, components: [{ type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2075,7 +2139,7 @@ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], 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: ActionSheetComponent, decorators: [{
             type: Component,
             args: [{
@@ -2232,17 +2296,17 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-navigation",
-  "version": "11.0.0-develop.109",
+  "version": "11.0.0-develop.111",
   "description": "Kendo UI Navigation for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -21,9 +21,10 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "11.0.0-develop.109",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.109",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.109",
+    "@progress/kendo-angular-common": "11.0.0-develop.111",
+    "@progress/kendo-angular-icons": "11.0.0-develop.111",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.111",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.111",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {

package/schematics/ngAdd/index.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
-    const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'NavigationModule', package: 'navigation' });
+    const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'NavigationModule', package: 'navigation', peerDependencies: {
+            // Peer dependency of icons
+            "@progress/kendo-svg-icons": "^1.0.0"
+        } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }
 exports.default = default_1;