@progress/kendo-angular-navigation 11.0.0-develop.99 → 11.0.1-develop.1

package/NOTICE.txt

@@ -1,6 +1,6 @@
 Progress Kendo UI for Angular 2023
 
-Copyright (c) 2016-2022 Progress Software Corporation and/or one of its
+Copyright © 2016-2023 Progress Software Corporation and/or one of its
 subsidiaries or affiliates. All rights reserved.
 
 Portions of the Product include certain open source and commercial third-party
@@ -65,7 +65,7 @@ the Product:
 
 (1) 	The Apache Software License, Version 2.0:
 
-Progress Kendo UI for Angular 2022 incorporates TsLib v1.9.3. Such technology
+Progress Kendo UI for Angular 2023 incorporates TsLib v1.9.3. Such technology
 is subject to the following terms and conditions: Apache Software License Version 2.0.
 
                                  Apache License
@@ -290,7 +290,7 @@ is subject to the following terms and conditions: Apache Software License Versio
 
 (2) 	BSD-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates xlf-translate v2.0.4.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates xlf-translate v2.0.4.  Such
 technology is subject to the following terms and conditions:
 
    BSD 3-Clause License
@@ -325,7 +325,7 @@ technology is subject to the following terms and conditions:
 
 (3) 	The ISC License:
 
-(a) Progress Kendo UI for Angular 2022 incorporates glob v7.1.3.  Such technology
+(a) Progress Kendo UI for Angular 2023 incorporates glob v7.1.3.  Such technology
 is subject to the following terms and conditions:
 
     The ISC License
@@ -352,7 +352,7 @@ is subject to the following terms and conditions:
 
 (4)	MIT-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates HammerJS v2.0.8.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates HammerJS v2.0.8.  Such
 technology is subject to the following terms and conditions:
 
    The MIT License (MIT)
@@ -377,7 +377,7 @@ technology is subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(b) Progress Kendo UI for Angular 2022 incorporates prosemirror-commands v1*,
+(b) Progress Kendo UI for Angular 2023 incorporates prosemirror-commands v1*,
 prosemirror-cursor v1*, prosemirror-gapcursor v1*, prosemirror-history v1*,
 prosemirror-inputrules v1*, prosemirror-keymap v1*, prosemirror-model v1*,
 prosemirror-schema-list v1*, prosemirror-state v1*, prosemirror-tables v0.7*,
@@ -404,7 +404,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.
 
-(c) Progress Kendo UI for Angular 2022 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
+(c) Progress Kendo UI for Angular 2023 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
 
    MIT License
 
@@ -428,7 +428,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(d) Progress Kendo UI for Angular 2022 incorporates @types/prosemirror-commands v1*,
+(d) Progress Kendo UI for Angular 2023 incorporates @types/prosemirror-commands v1*,
 @types/prosemirror-dropcursor v1*, @types/prosemirror-gapcursor v1*, @types/prosemirror-history v1*,
 @types/prosemirror-inputrules v1*, @types/prosemirror-keymap v1*, @types/prosemirror-model v1*,
 @types/prosemirror-schema-list v1*, @types/prosemirror-state v1*, @types/prosemirror-tables v0.9*,
@@ -457,7 +457,7 @@ subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
-(e) Progress Kendo UI for Angular 2022 incorporates pako-esm v1.0.0.  Such
+(e) Progress Kendo UI for Angular 2023 incorporates pako-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
   Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -483,7 +483,7 @@ technology is subject to the following terms and conditions:
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 
-(f) Progress Kendo UI for Angular 2022 incorporates jszip-esm v1.0.0.  Such
+(f) Progress Kendo UI for Angular 2023 incorporates jszip-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
     Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -510,7 +510,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(g) Progress Kendo UI for Angular 2022 incorporates data.task v3.1.2.  Such
+(g) Progress Kendo UI for Angular 2023 incorporates data.task v3.1.2.  Such
 technology is subject to the following terms and conditions:
 
     The MIT License
@@ -535,7 +535,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(h) Progress Kendo UI for Angular 2022 incorporates ramda v0.23.  Such technology
+(h) Progress Kendo UI for Angular 2023 incorporates ramda v0.23.  Such technology
 is subject to the following terms and conditions:
 
     The MIT License (MIT)
@@ -560,7 +560,7 @@ is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(i) Progress Kendo UI for Angular 2022 incorporates js-yaml v3.14.0.  Such
+(i) Progress Kendo UI for Angular 2023 incorporates js-yaml v3.14.0.  Such
 technology is subject to the following terms and conditions:
 
     (The MIT License)
@@ -587,7 +587,7 @@ technology is subject to the following terms and conditions:
 
 (5)	UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE:
 
-Progress Kendo UI for Angular 2022 incorporates Unicode CLDR Database v33.
+Progress Kendo UI for Angular 2023 incorporates Unicode CLDR Database v33.
 Such technology is subject to the following terms and conditions:
 
    UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE
@@ -605,7 +605,7 @@ Such technology is subject to the following terms and conditions:
 
    COPYRIGHT AND PERMISSION NOTICE
 
-   Copyright © 1991-2021 Unicode, Inc. All rights reserved.
+   Copyright © 1991-2019 Unicode, Inc. All rights reserved.
    Distributed under the Terms of Use in https://www.unicode.org/copyright.html.
 
    Permission is hereby granted, free of charge, to any person obtaining
@@ -642,7 +642,7 @@ incorporated into the Product:  NONE
 
 3. Special Notices Regarding Progress Products incorporated into the Product:
 
-(a) Progress Kendo UI for Angular 2022 incorporates Kendo UI Licensing CLI v1.1
+(a) Progress Kendo UI for Angular 2023 incorporates Kendo UI Licensing CLI v1.1
 from Progress Software Corporation. See NOTICE.txt text file within product for
 third-party license information.
 
@@ -651,4 +651,4 @@ the release notes or other documentation that accompanies updates received in
 connection with support of the Product.
 
 
-Updated 1/6/2022
+Updated 13.Jan.2023

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: [{