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

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

@@ -12,9 +12,14 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
+import { arrowUpIcon, arrowDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, chevronUpIcon, chevronDownIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
+import * as i2 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
+import * as i2$1 from '@progress/kendo-angular-buttons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i4 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
 import { Draggable } from '@progress/kendo-draggable';
@@ -26,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673466816,
-    version: '',
+    publishDate: 1674059806,
+    version: '11.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -294,6 +299,7 @@ const hasItemIndex = (item, indexAttr) => isPresent(item.getAttribute(indexAttr)
  */
 const closestItem = (target, targetAttr, scope) => closestInScope(target, hasItemIndex, scope, targetAttr);
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  */
@@ -342,6 +348,14 @@ class PanelBarItemComponent {
         this.role = "treeitem";
         this.titleAttribute = null; // eslint-disable-line
         this.kItemClass = true;
+        /**
+         * @hidden
+         */
+        this.arrowUpSVGIcon = arrowUpIcon;
+        /**
+         * @hidden
+         */
+        this.arrowDownSVGIcon = arrowDownIcon;
         this.focused = false;
         this.wrapperFocused = false;
         this.subscriptions = new Subscription(() => { });
@@ -351,6 +365,19 @@ class PanelBarItemComponent {
         this.wrapperFocused = parent ? parent.focused : false;
         this.level = this.parent ? this.parent.level + 1 : 0;
     }
+    /**
+     * Defines an SVGIcon to be rendered.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     /**
      * When set to `true`, expands the PanelBar item ([see example]({% slug items_panelbar %}#toc-expanded-state)).
      */
@@ -442,10 +469,30 @@ class PanelBarItemComponent {
      * @hidden
      */
     get iconClasses() {
-        const icon = this.icon ? 'k-i-' + this.icon : null;
-        return {
-            [icon || this.iconClass]: true
-        };
+        if (this.icon) {
+            return `${this.icon}`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customIconClasses() {
+        if (this.iconClass) {
+            return `${this.iconClass}`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get dirInnerCssClasses() {
+        const dirClass = this.expanded ? 'k-panelbar-collapse' : 'k-panelbar-expand';
+        return `k-panelbar-toggle ${dirClass}`;
+    }
+    /**
+     * @hidden
+     */
+    get arrowSVGIcon() {
+        return this.expanded ? this.arrowUpSVGIcon : this.arrowDownSVGIcon;
     }
     /**
      * @hidden
@@ -458,6 +505,7 @@ class PanelBarItemComponent {
             focused: this.focused,
             icon: this.icon,
             iconClass: this.iconClass,
+            svgIcon: this.svgIcon,
             id: this.id,
             imageUrl: this.imageUrl,
             selected: this.selected,
@@ -520,7 +568,7 @@ class PanelBarItemComponent {
     }
 }
 PanelBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-state-default": "this.kStateDefaultClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
+PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-state-default": "this.kStateDefaultClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
             <span
                 #header
                 [class.k-link]="true"
@@ -528,11 +576,14 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [class.k-focus]="focused && wrapperFocused"
                 [class.k-disabled]="disabled"
                 (click)="onItemClick($event)">
-                <span
-                    *ngIf="icon || iconClass"
-                    class="k-icon k-panelbar-item-icon"
-                    [ngClass]="iconClasses">
-                </span>
+                <kendo-icon-wrapper
+                    *ngIf="icon || iconClass || svgIcon"
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="svgIcon"
+                    innerCssClass="k-panelbar-item-icon"
+                >
+                </kendo-icon-wrapper>
                 <img
                     *ngIf="imageUrl"
                     class="k-image k-panelbar-item-icon"
@@ -547,6 +598,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                         id: id,
                         icon: icon,
                         iconClass: iconClass,
+                        svgIcon: svgIcon,
                         imageUrl: imageUrl,
                         selected: selected,
                         expanded: expanded,
@@ -555,10 +607,13 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                         content: content
                     }
                 }"></ng-template>
-                <span *ngIf="hasChildItems || hasContent"
-                    class="k-icon k-panelbar-toggle"
-                    [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
-                </span>
+                <kendo-icon-wrapper
+                    *ngIf="hasChildItems || hasContent"
+                    [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
+                    [svgIcon]="arrowSVGIcon"
+                    [innerCssClass]="dirInnerCssClasses"
+                >
+                </kendo-icon-wrapper>
             </span>
             <div 
                 #contentWrapper
@@ -604,6 +659,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                             [id]="item.id"
                             [icon]="item.icon"
                             [iconClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
                             [imageUrl]="item.imageUrl"
                             [selected]="!!item.selected"
                             [expanded]="!!item.expanded"
@@ -634,7 +690,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     </ng-template>
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
-            </div>`, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('toggle', [
             state('inactive', style({ display: 'none' })),
             transition('* => active', [
@@ -673,11 +729,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [class.k-focus]="focused && wrapperFocused"
                 [class.k-disabled]="disabled"
                 (click)="onItemClick($event)">
-                <span
-                    *ngIf="icon || iconClass"
-                    class="k-icon k-panelbar-item-icon"
-                    [ngClass]="iconClasses">
-                </span>
+                <kendo-icon-wrapper
+                    *ngIf="icon || iconClass || svgIcon"
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="svgIcon"
+                    innerCssClass="k-panelbar-item-icon"
+                >
+                </kendo-icon-wrapper>
                 <img
                     *ngIf="imageUrl"
                     class="k-image k-panelbar-item-icon"
@@ -692,6 +751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         id: id,
                         icon: icon,
                         iconClass: iconClass,
+                        svgIcon: svgIcon,
                         imageUrl: imageUrl,
                         selected: selected,
                         expanded: expanded,
@@ -700,10 +760,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         content: content
                     }
                 }"></ng-template>
-                <span *ngIf="hasChildItems || hasContent"
-                    class="k-icon k-panelbar-toggle"
-                    [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
-                </span>
+                <kendo-icon-wrapper
+                    *ngIf="hasChildItems || hasContent"
+                    [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
+                    [svgIcon]="arrowSVGIcon"
+                    [innerCssClass]="dirInnerCssClasses"
+                >
+                </kendo-icon-wrapper>
             </span>
             <div 
                 #contentWrapper
@@ -749,6 +812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             [id]="item.id"
                             [icon]="item.icon"
                             [iconClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
                             [imageUrl]="item.imageUrl"
                             [selected]="!!item.selected"
                             [expanded]="!!item.expanded"
@@ -795,6 +859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], imageUrl: [{
                 type: Input
             }], disabled: [{
@@ -1413,6 +1479,7 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     [id]="item.id"
                     [icon]="item.icon"
                     [iconClass]="item.iconClass"
+                    [svgIcon]="item.svgIcon"
                     [imageUrl]="item.imageUrl"
                     [selected]="!!item.selected"
                     [expanded]="!!item.expanded"
@@ -1424,7 +1491,7 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 </kendo-panelbar-item>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1447,6 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [id]="item.id"
                     [icon]="item.icon"
                     [iconClass]="item.iconClass"
+                    [svgIcon]="item.svgIcon"
                     [imageUrl]="item.imageUrl"
                     [selected]="!!item.selected"
                     [expanded]="!!item.expanded"
@@ -1934,6 +2002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const stopPropagation = ({ originalEvent: event }) => {
     event.stopPropagation();
     event.preventDefault();
@@ -1951,11 +2020,11 @@ const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
  * @hidden
  */
 class SplitterBarComponent {
-    constructor(draggable, element, splitterService, localization, renderer) {
+    constructor(draggable, localization, splitterService, element, renderer) {
         this.draggable = draggable;
-        this.element = element;
-        this.splitterService = splitterService;
         this.localization = localization;
+        this.splitterService = splitterService;
+        this.element = element;
         this.renderer = renderer;
         this.orientation = 'horizontal';
         this.index = 0;
@@ -2045,26 +2114,60 @@ class SplitterBarComponent {
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         return classFromObject({
-            'k-icon': true,
-            'k-i-caret-alt-left': isCollapsible && isHorizontal && !isCollapsed,
-            'k-i-caret-alt-right': isCollapsible && isHorizontal && isCollapsed,
-            'k-i-caret-alt-up': isCollapsible && !isHorizontal && !isCollapsed,
-            'k-i-caret-alt-down': isCollapsible && !isHorizontal && isCollapsed
+            'caret-alt-left': isCollapsible && isHorizontal && !isCollapsed,
+            'caret-alt-right': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-up': isCollapsible && !isHorizontal && !isCollapsed,
+            'caret-alt-down': isCollapsible && !isHorizontal && isCollapsed
         });
     }
+    previousSVGArrowClass() {
+        const pane = this.splitterService.pane(this.index);
+        const isCollapsible = pane.collapsible;
+        const isCollapsed = pane.collapsed;
+        const isHorizontal = this.orientation === 'horizontal';
+        if (isCollapsible && isHorizontal && !isCollapsed) {
+            return caretAltLeftIcon;
+        }
+        if (isCollapsible && isHorizontal && isCollapsed) {
+            return caretAltRightIcon;
+        }
+        if (isCollapsible && !isHorizontal && !isCollapsed) {
+            return caretAltUpIcon;
+        }
+        if (isCollapsible && !isHorizontal && isCollapsed) {
+            return caretAltDownIcon;
+        }
+    }
     nextArrowClass() {
         const pane = this.splitterService.pane(this.index + 1);
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         return classFromObject({
-            'k-icon': true,
-            'k-i-caret-alt-right': isCollapsible && isHorizontal && !isCollapsed,
-            'k-i-caret-alt-left': isCollapsible && isHorizontal && isCollapsed,
-            'k-i-caret-alt-down': isCollapsible && !isHorizontal && !isCollapsed,
-            'k-i-caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
+            'caret-alt-right': isCollapsible && isHorizontal && !isCollapsed,
+            'caret-alt-left': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-down': isCollapsible && !isHorizontal && !isCollapsed,
+            'caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
         });
     }
+    nextSVGArrowClass() {
+        const pane = this.splitterService.pane(this.index + 1);
+        const isCollapsible = pane.collapsible;
+        const isCollapsed = pane.collapsed;
+        const isHorizontal = this.orientation === 'horizontal';
+        if (isCollapsible && isHorizontal && !isCollapsed) {
+            return caretAltRightIcon;
+        }
+        if (isCollapsible && isHorizontal && isCollapsed) {
+            return caretAltLeftIcon;
+        }
+        if (isCollapsible && !isHorizontal && !isCollapsed) {
+            return caretAltDownIcon;
+        }
+        if (isCollapsible && !isHorizontal && isCollapsed) {
+            return caretAltUpIcon;
+        }
+    }
     togglePane() {
         if (this.expandLast) {
             this.toggleNext();
@@ -2098,33 +2201,33 @@ class SplitterBarComponent {
         }
     }
 }
-SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.aria-orientation": "this.orientation", "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <span [class]="previousArrowClass()"></span>
+            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <span [class]="nextArrowClass()"></span>
+            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
         </div>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
                     template: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <span [class]="previousArrowClass()"></span>
+            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <span [class]="nextArrowClass()"></span>
+            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
         </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { orientation: [{
+                }] }, { type: i1.LocalizationService }, { type: SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { orientation: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -2499,7 +2602,7 @@ class TabStripTabComponent {
     }
 }
 TabStripTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon" }, queries: [{ propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -2521,6 +2624,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], closeIcon: [{
                 type: Input
+            }], closeIconClass: [{
+                type: Input
+            }], closeSVGIcon: [{
+                type: Input
             }], _tabContent: [{
                 type: ContentChildren,
                 args: [TabContentDirective]
@@ -2828,10 +2935,10 @@ const HIDDEN_CLASS = 'k-hidden';
  * @hidden
  */
 const DIRECTION_CLASSES = {
-    left: 'k-i-caret-alt-left',
-    right: 'k-i-caret-alt-right',
-    up: 'k-i-caret-alt-up',
-    down: 'k-i-caret-alt-down'
+    left: 'caret-alt-left',
+    right: 'caret-alt-right',
+    up: 'caret-alt-up',
+    down: 'caret-alt-down'
 };
 /**
  * @hidden
@@ -3011,14 +3118,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 /**
  * @hidden
  */
-const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, prevButtonIcon, nextButtonIcon }) => ({
+const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
     enabled,
     scrollButtons,
     mouseScroll,
     buttonScrollSpeed,
     mouseScrollSpeed,
     prevButtonIcon,
-    nextButtonIcon
+    nextButtonIcon,
+    prevSVGButtonIcon,
+    nextSVGButtonIcon
 });
 /**
  * @hidden
@@ -3040,6 +3149,7 @@ class TabScrollEvent extends PreventableEvent$1 {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  */
@@ -3048,7 +3158,6 @@ class TabStripScrollableButtonComponent {
         this.host = host;
         this.renderer = renderer;
         this.ngZone = ngZone;
-        this.btnClasses = true;
         this.prev = false;
         this.tabScroll = new EventEmitter();
         this.onClick = new EventEmitter();
@@ -3073,7 +3182,13 @@ class TabStripScrollableButtonComponent {
         return this.host.nativeElement.getBoundingClientRect();
     }
     get iconClass() {
-        return this.scrollButtonIconClass[this.prev ? 'prevScrollButton' : 'nextScrollButton'];
+        return this.scrollButtonIconClass;
+    }
+    get customIconClass() {
+        return this.customScrollButtonIconClass;
+    }
+    get svgIcon() {
+        return this.scrollButtonSVGIcon;
     }
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -3090,11 +3205,36 @@ class TabStripScrollableButtonComponent {
         const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.up;
         const defaultNextIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.down;
         if (typeof this.scrollable === 'object') {
-            const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : this.scrollable.prevButtonIcon;
-            const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : this.scrollable.nextButtonIcon;
-            return { prevScrollButton: prevIcon, nextScrollButton: nextIcon };
+            const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
+            const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
+            if (prevIcon && this.prev) {
+                return prevIcon;
+            }
+            else if (nextIcon && !this.prev) {
+                return nextIcon;
+            }
+        }
+    }
+    get customScrollButtonIconClass() {
+        if (typeof this.scrollable === 'object') {
+            const prevIcon = this.scrollable.prevButtonIcon;
+            const nextIcon = this.scrollable.nextButtonIcon;
+            if (prevIcon && this.prev) {
+                return `k-icon ${prevIcon}`;
+            }
+            if (nextIcon && !this.prev) {
+                return `k-icon ${nextIcon}`;
+            }
+        }
+    }
+    get scrollButtonSVGIcon() {
+        if (typeof this.scrollable === 'object') {
+            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : undefined;
+            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : undefined;
+            if (prevIcon || nextIcon) {
+                return this.prev ? prevIcon : nextIcon;
+            }
         }
-        return { prevScrollButton: defaultPrevIcon, nextScrollButton: defaultNextIcon };
     }
     emitScrollEvent(event) {
         const scrollEvent = new TabScrollEvent({
@@ -3105,37 +3245,31 @@ class TabStripScrollableButtonComponent {
     }
 }
 TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-button": "this.btnClasses", "class.k-button-md": "this.btnClasses", "class.k-icon-button": "this.btnClasses", "class.k-rounded-md": "this.btnClasses", "class.k-button-flat": "this.btnClasses", "class.k-button-flat-base": "this.btnClasses", "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
-        <span class="k-icon k-button-icon" [ngClass]="iconClass"></span>
-    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon"
+            innerCssClass="k-button-icon"
+        >
+        </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: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-        <span class="k-icon k-button-icon" [ngClass]="iconClass"></span>
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon"
+            innerCssClass="k-button-icon"
+        >
+        </kendo-icon-wrapper>
     `,
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripScrollableButton]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { btnClasses: [{
-                type: HostBinding,
-                args: ['class.k-button']
-            }, {
-                type: HostBinding,
-                args: ['class.k-button-md']
-            }, {
-                type: HostBinding,
-                args: ['class.k-icon-button']
-            }, {
-                type: HostBinding,
-                args: ['class.k-rounded-md']
-            }, {
-                type: HostBinding,
-                args: ['class.k-button-flat']
-            }, {
-                type: HostBinding,
-                args: ['class.k-button-flat-base']
-            }], prevClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { prevClass: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-prev']
             }], nextClass: [{
@@ -3181,10 +3315,20 @@ class TabComponent {
         return this.tabStripClosable;
     }
     get closeButtonClasses() {
-        if (isPresent(this.tab.closeIcon)) {
-            return this.tab.closeIcon;
+        if (!this.customTabstripCloseIcon && this.tabStripCloseIcon && !this.tab.closeIconClass) {
+            if (this.tab.closeIcon) {
+                return this.tab.closeIcon;
+            }
+            return this.tabStripCloseIcon;
+        }
+    }
+    get customCloseButtonClasses() {
+        if (this.customTabstripCloseIcon || this.tab.closeIconClass) {
+            if (this.tab.closeIconClass) {
+                return this.tab.closeIconClass;
+            }
+            return this.customTabstripCloseIcon;
         }
-        return this.tabStripCloseIcon;
     }
     get closeButtonTitle() {
         return this.localization.get('closeTitle');
@@ -3195,21 +3339,27 @@ class TabComponent {
     }
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
         <span class="k-link" *ngIf="tab.tabTitle">
             <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
             </ng-template>
         </span>
-        <span class="k-remove-tab k-button k-icon-button k-flat" *ngIf="tabClosable"
+
+        <button
+            kendoButton
+            *ngIf="tabClosable"
             role="button"
+            fillMode="flat"
+            [icon]="closeButtonClasses"
+            [iconClass]="customCloseButtonClasses"
+            [svgIcon]="closeSVGIcon"
             [title]="closeButtonTitle"
             [attr.aria-label]="closeButtonTitle"
             (click)="closeTab(index)"
-        >
-            <span [ngClass]="closeButtonClasses"></span>
-        </span>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            class="k-remove-tab k-icon-button"
+        ></button>
+    `, isInline: true, components: [{ type: i2$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
@@ -3221,14 +3371,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
             </ng-template>
         </span>
-        <span class="k-remove-tab k-button k-icon-button k-flat" *ngIf="tabClosable"
+
+        <button
+            kendoButton
+            *ngIf="tabClosable"
             role="button"
+            fillMode="flat"
+            [icon]="closeButtonClasses"
+            [iconClass]="customCloseButtonClasses"
+            [svgIcon]="closeSVGIcon"
             [title]="closeButtonTitle"
             [attr.aria-label]="closeButtonTitle"
             (click)="closeTab(index)"
-        >
-            <span [ngClass]="closeButtonClasses"></span>
-        </span>
+            class="k-remove-tab k-icon-button"
+        ></button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { tab: [{
@@ -3239,6 +3395,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], tabStripCloseIcon: [{
                 type: Input
+            }], customTabstripCloseIcon: [{
+                type: Input
+            }], closeSVGIcon: [{
+                type: Input
             }], tabClose: [{
                 type: Output
             }], hostClasses: [{
@@ -3355,10 +3515,9 @@ class TabStripComponent {
          */
         this.closable = false;
         /**
-         * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button span element.
-         * Allows the usage of custom icons.
+         * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
          */
-        this.closeIcon = 'k-icon k-i-x';
+        this.closeIcon = 'x';
         /**
          * Fires each time the user selects a tab ([see example]({% slug overview_tabstrip %}#toc-basic-usage)).
          * The event data contains the index of the selected tab and its title.
@@ -3420,6 +3579,19 @@ class TabStripComponent {
     get scrollable() {
         return this._scrollableSettings;
     }
+    /**
+     * Defines an SVGIcon to be rendered for the close icon.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set closeSVGIcon(icon) {
+        if (isDevMode() && icon && this.closeIcon && this.closeIcon !== 'x') {
+            throw new Error('Setting both closeIcon and svgIcon options at the same time is not supported.');
+        }
+        this._closeSVGIcon = icon;
+    }
+    get closeSVGIcon() {
+        return this._closeSVGIcon;
+    }
     get tabsAtTop() {
         return this.tabPosition === 'top';
     }
@@ -3648,7 +3820,7 @@ class TabStripComponent {
     }
 }
 TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClass", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
+TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClass", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
         TabStripService,
         ScrollService,
         LocalizationService,
@@ -3693,6 +3865,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)">
                 </span>
                 <ul role="tablist" #tablist
@@ -3713,6 +3886,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             role="tab"
                             [tabStripClosable]="closable"
                             [tabStripCloseIcon]="closeIcon"
+                            [customTabstripCloseIcon]="closeIconClass"
+                            [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="'k-tabstrip-tab-' + i"
@@ -3729,6 +3904,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -3752,7 +3928,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </ng-template>
         </ng-template>
         <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon"], outputs: ["tabClose"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+    `, isInline: true, components: [{ type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
         trigger('state', [
             state('active', style({ opacity: 1 })),
             transition('* => active', [
@@ -3821,6 +3997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)">
                 </span>
                 <ul role="tablist" #tablist
@@ -3841,6 +4018,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             role="tab"
                             [tabStripClosable]="closable"
                             [tabStripCloseIcon]="closeIcon"
+                            [customTabstripCloseIcon]="closeIconClass"
+                            [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="'k-tabstrip-tab-' + i"
@@ -3857,6 +4036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
+                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -3898,6 +4078,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], closeIcon: [{
                 type: Input
+            }], closeIconClass: [{
+                type: Input
+            }], closeSVGIcon: [{
+                type: Input
             }], tabSelect: [{
                 type: Output
             }], tabClose: [{
@@ -4334,6 +4518,7 @@ class DrawerListSelectEvent extends PreventableEvent$1 {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  */
@@ -4342,6 +4527,8 @@ class DrawerItemComponent {
         this.drawerService = drawerService;
         this.element = element;
         this.renderer = renderer;
+        this.arrowUpIcon = chevronUpIcon;
+        this.arrowDownIcon = chevronDownIcon;
     }
     get disabledClass() {
         return this.item.disabled;
@@ -4360,14 +4547,20 @@ class DrawerItemComponent {
         }
     }
     get iconClasses() {
-        const classes = [];
         if (this.item.icon) {
-            classes.push(`k-icon ${this.item.icon}`);
+            const stripIcon = this.item.icon.replace('k-i-', '');
+            return `${stripIcon}`;
         }
-        if (this.item.iconClass) {
-            classes.push(`${this.item.iconClass}`);
+    }
+    get innerCssClasses() {
+        if (this.item.iconClass && this.item.icon) {
+            return `${this.item.iconClass}`;
+        }
+    }
+    get customIconClasses() {
+        if (!this.item.icon && this.item.iconClass) {
+            return this.item.iconClass;
         }
-        return classes;
     }
     get item() {
         return this.viewItem.item;
@@ -4387,19 +4580,34 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
         <ng-template #defaultTemplate>
             <ng-container *ngIf="expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
+
                 <span class="k-item-text">{{ item.text }}</span>
-                <span *ngIf="viewItem.hasChildren"
-                      class="k-icon k-drawer-toggle"
-                      [class.k-i-chevron-up]="viewItem.isExpanded"
-                      [class.k-i-chevron-down]="!viewItem.isExpanded"
-                ></span>
+                <kendo-icon-wrapper
+                    *ngIf="viewItem.hasChildren"
+                    [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
+                    innerCssClass="k-drawer-toggle"
+                    [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -4418,16 +4626,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         <ng-template #defaultTemplate>
             <ng-container *ngIf="expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
+
                 <span class="k-item-text">{{ item.text }}</span>
-                <span *ngIf="viewItem.hasChildren"
-                      class="k-icon k-drawer-toggle"
-                      [class.k-i-chevron-up]="viewItem.isExpanded"
-                      [class.k-i-chevron-down]="!viewItem.isExpanded"
-                ></span>
+                <kendo-icon-wrapper
+                    *ngIf="viewItem.hasChildren"
+                    [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
+                    innerCssClass="k-drawer-toggle"
+                    [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
     `
@@ -4601,6 +4824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [DrawerItemComponent, { read: ElementRef }]
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
 /**
  * Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
@@ -5363,6 +5587,8 @@ class StepperStepComponent {
         this.ngZone = ngZone;
         this.isStepValid = undefined;
         this.shouldCheckValidity = undefined;
+        this.checkCircleIcon = checkCircleIcon;
+        this.exclamationCircleIcon = exclamationCircleIcon;
         validatePackage(packageMetadata);
         this.subs = this.service.focusedStepChange.subscribe(() => {
             this.onFocusedStepChange();
@@ -5410,16 +5636,48 @@ class StepperStepComponent {
         const active = this.service.focusedStep || this.service.currentStep;
         return this.index === active ? 0 : -1;
     }
-    get indicatorIconClasses() {
-        if (this.step.icon) {
-            return `k-icon k-i-${this.step.icon}`;
+    get indicatorIconClass() {
+        if (this.step.icon && !this.step.iconClass) {
+            return `${this.step.icon}`;
         }
+        if (!this.step.icon && !this.step.iconClass && this.shouldCheckValidity) {
+            return this.validationIconClasses;
+        }
+    }
+    get customIndicatorIconClass() {
         if (this.step.iconClass) {
             return `${this.step.iconClass}`;
         }
-        if (this.shouldCheckValidity) {
-            return this.validationIconClasses;
+        const renderCustomValidationIcon = !this.step.icon && !this.step.iconClass && this.shouldCheckValidity;
+        if (renderCustomValidationIcon) {
+            return this.customValidationIconClasses;
+        }
+    }
+    get SVGIndicatorIcon() {
+        if (this.step.svgIcon) {
+            return this.step.svgIcon;
+        }
+        if (!this.step.svgIcon && this.shouldCheckValidity) {
+            return this.validationSVGIcon;
+        }
+    }
+    get validationIconClasses() {
+        if (this.isStepValid) {
+            return !this.successIcon ? 'check-circle' : '';
         }
+        return !this.errorIcon ? 'exclamation-circle' : '';
+    }
+    get customValidationIconClasses() {
+        if (this.isStepValid) {
+            return this.successIcon ? this.successIcon : '';
+        }
+        return this.errorIcon ? this.errorIcon : '';
+    }
+    get validationSVGIcon() {
+        if (this.isStepValid) {
+            return this.successSVGIcon ? this.successSVGIcon : this.checkCircleIcon;
+        }
+        return this.errorSVGIcon ? this.errorSVGIcon : this.exclamationCircleIcon;
     }
     get showIndicatorIcon() {
         if (this.shouldCheckValidity) {
@@ -5444,14 +5702,6 @@ class StepperStepComponent {
     get showLabelText() {
         return this.type === 'label' || this.type === 'full';
     }
-    get validationIconClasses() {
-        if (this.isStepValid) {
-            return this.successIcon ? `${this.successIcon}` : 'k-icon k-i-check-circle';
-        }
-        else {
-            return this.errorIcon ? `${this.errorIcon}` : 'k-icon k-i-exclamation-circle';
-        }
-    }
     get indicatorText() {
         const text = this.step.text;
         return text ? text : this.index + 1;
@@ -5500,7 +5750,7 @@ class StepperStepComponent {
     }
 }
 StepperStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperStepComponent, deps: [{ token: StepperService }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", errorIcon: "errorIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <a href='#' class='k-step-link' #stepLink
             [attr.tabindex]='tabIndexAttr'
             [attr.title]='step.label'
@@ -5525,7 +5775,14 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                     </ng-template>
 
                     <ng-container *ngIf='!indicatorTemplate'>
-                        <span *ngIf='showIndicatorIcon' class='k-step-indicator-icon' [ngClass]='indicatorIconClasses'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showIndicatorIcon'
+                            [name]='indicatorIconClass'
+                            [customFontClass]='customIndicatorIconClass'
+                            [svgIcon]='SVGIndicatorIcon'
+                            innerCssClass='k-step-indicator-icon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-indicator-text' *ngIf='!showIndicatorIcon'>{{ indicatorText }}</span>
                     </ng-container>
                 </span>
@@ -5538,13 +5795,20 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 
                     <ng-container *ngIf='!labelTemplate'>
                         <span class='k-step-text' *ngIf='showLabelText'>{{ step.label }}</span>
-                        <span [ngClass]='validationIconClasses' *ngIf='showLabelIcon' aria-hidden='true'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showLabelIcon'
+                            aria-hidden='true'
+                            [name]='validationIconClasses'
+                            [customFontClass]='customValidationIconClasses'
+                            [svgIcon]='validationSVGIcon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-label-optional' *ngIf='step.optional'>({{optionalText}})</span>
                     </ng-container>
                 </span>
             </ng-container>
         </a>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{
@@ -5575,7 +5839,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     </ng-template>
 
                     <ng-container *ngIf='!indicatorTemplate'>
-                        <span *ngIf='showIndicatorIcon' class='k-step-indicator-icon' [ngClass]='indicatorIconClasses'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showIndicatorIcon'
+                            [name]='indicatorIconClass'
+                            [customFontClass]='customIndicatorIconClass'
+                            [svgIcon]='SVGIndicatorIcon'
+                            innerCssClass='k-step-indicator-icon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-indicator-text' *ngIf='!showIndicatorIcon'>{{ indicatorText }}</span>
                     </ng-container>
                 </span>
@@ -5588,7 +5859,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
                     <ng-container *ngIf='!labelTemplate'>
                         <span class='k-step-text' *ngIf='showLabelText'>{{ step.label }}</span>
-                        <span [ngClass]='validationIconClasses' *ngIf='showLabelIcon' aria-hidden='true'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showLabelIcon'
+                            aria-hidden='true'
+                            [name]='validationIconClasses'
+                            [customFontClass]='customValidationIconClasses'
+                            [svgIcon]='validationSVGIcon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-label-optional' *ngIf='step.optional'>({{optionalText}})</span>
                     </ng-container>
                 </span>
@@ -5606,8 +5884,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], successIcon: [{
                 type: Input
+            }], successSVGIcon: [{
+                type: Input
             }], errorIcon: [{
                 type: Input
+            }], errorSVGIcon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
             }], indicatorTemplate: [{
                 type: Input
             }], labelTemplate: [{
@@ -5704,7 +5988,7 @@ class StepperListComponent {
     }
 }
 StepperListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", errorIcon: "errorIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [errorIcon]='errorIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [successSVGIcon]='successSVGIcon'\n                [errorIcon]='errorIcon'\n                [errorSVGIcon]='errorSVGIcon'\n                [svgIcon]='svgIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5719,7 +6003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [index]='idx'
                 [current]='currentStep'
                 [successIcon]='successIcon'
+                [successSVGIcon]='successSVGIcon'
                 [errorIcon]='errorIcon'
+                [errorSVGIcon]='errorSVGIcon'
+                [svgIcon]='svgIcon'
                 [indicatorTemplate]='indicatorTemplate'
                 [labelTemplate]='labelTemplate'
                 [stepTemplate]='stepTemplate'
@@ -5752,8 +6039,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], successIcon: [{
                 type: Input
+            }], successSVGIcon: [{
+                type: Input
             }], errorIcon: [{
                 type: Input
+            }], errorSVGIcon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
             }], indicatorTemplate: [{
                 type: Input
             }], labelTemplate: [{
@@ -5916,6 +6209,16 @@ class StepperComponent {
     get steps() {
         return this._steps;
     }
+    /**
+     * Defines an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     ngOnInit() {
         this.applyHostStyling();
     }
@@ -6019,7 +6322,7 @@ class StepperComponent {
     }
 }
 StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: StepperService }], target: i0.ɵɵFactoryTarget.Component });
-StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperComponent, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperComponent, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
         LocalizationService,
         StepperService,
         {
@@ -6039,7 +6342,10 @@ StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [steps]='steps'
             [currentStep]='currentStep'
             [successIcon]='successIcon'
+            [successSVGIcon]='successSVGIcon'
             [errorIcon]='errorIcon'
+            [errorSVGIcon]='errorSVGIcon'
+            [svgIcon]="svgIcon"
             [indicatorTemplate]='indicatorTemplate?.templateRef'
             [labelTemplate]='labelTemplate?.templateRef'
             [stepTemplate]='stepTemplate?.templateRef'
@@ -6061,7 +6367,7 @@ StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
         </kendo-progressbar>
-    `, isInline: true, components: [{ type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{
@@ -6088,7 +6394,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [steps]='steps'
             [currentStep]='currentStep'
             [successIcon]='successIcon'
+            [successSVGIcon]='successSVGIcon'
             [errorIcon]='errorIcon'
+            [errorSVGIcon]='errorSVGIcon'
+            [svgIcon]="svgIcon"
             [indicatorTemplate]='indicatorTemplate?.templateRef'
             [labelTemplate]='labelTemplate?.templateRef'
             [stepTemplate]='stepTemplate?.templateRef'
@@ -6137,6 +6446,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], steps: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
+            }], successSVGIcon: [{
+                type: Input
+            }], errorSVGIcon: [{
+                type: Input
             }], successIcon: [{
                 type: Input
             }], errorIcon: [{
@@ -6354,6 +6669,19 @@ class AvatarComponent {
     get avatarHeight() {
         return this.height;
     }
+    /**
+     * Defines an SVGIcon to be rendered.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     ngOnInit() {
         this.verifyProperties();
     }
@@ -6364,17 +6692,6 @@ class AvatarComponent {
         });
         this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
     }
-    /**
-     * @hidden
-     */
-    iconClasses() {
-        if (this.icon) {
-            return `k-icon k-i-${this.icon}`;
-        }
-        if (this.iconClass) {
-            return `${this.iconClass}`;
-        }
-    }
     /**
      * @hidden
      */
@@ -6424,7 +6741,7 @@ class AvatarComponent {
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AvatarComponent, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, ngImport: i0, template: `
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AvatarComponent, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, ngImport: i0, template: `
         <ng-content *ngIf="customAvatar"></ng-content>
 
         <ng-container *ngIf="imageSrc">
@@ -6439,10 +6756,16 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
 
         <ng-container *ngIf="icon || iconClass">
             <span class="k-avatar-icon">
-                <span [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+                <kendo-icon-wrapper
+                    [ngStyle]="cssStyle"
+                    [name]="icon"
+                    [customFontClass]="iconClass"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
@@ -6462,7 +6785,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         <ng-container *ngIf="icon || iconClass">
             <span class="k-avatar-icon">
-                <span [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+                <kendo-icon-wrapper
+                    [ngStyle]="cssStyle"
+                    [name]="icon"
+                    [customFontClass]="iconClass"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
             </span>
         </ng-container>
     `
@@ -6510,6 +6839,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], imageSrc: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }] } });
 
 /**
@@ -7101,6 +7432,32 @@ class ExpansionPanelComponent {
     get expanded() {
         return this._expanded;
     }
+    /**
+     * Defines an SVGIcon for the expanded state of the component.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgExpandIcon(icon) {
+        if (isDevMode() && icon && this.expandIcon) {
+            throw new Error('Setting both expandIcon/svgExpandIcon options at the same time is not supported.');
+        }
+        this._svgExpandIcon = icon;
+    }
+    get svgExpandIcon() {
+        return this._svgExpandIcon;
+    }
+    /**
+     * Defines an SVGIcon for the collapsed state of the component.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgCollapseIcon(icon) {
+        if (isDevMode() && icon && this.collapseIcon) {
+            throw new Error('Setting both collapseIcon/svgCollapseIcon options at the same time is not supported.');
+        }
+        this._svgCollapseIcon = icon;
+    }
+    get svgCollapseIcon() {
+        return this._svgCollapseIcon;
+    }
     get expandedClass() {
         return this.expanded && !this.disabled;
     }
@@ -7184,12 +7541,34 @@ class ExpansionPanelComponent {
     /**
      * @hidden
      */
-    get indicatorClasses() {
+    get expanderIndicatorClasses() {
+        if (this.expanded) {
+            return !this.collapseIcon ? `caret-alt-up` : '';
+        }
+        else {
+            return !this.expandIcon ? `caret-alt-down` : '';
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customExpanderIndicatorClasses() {
+        if (this.expanded) {
+            return this.collapseIcon ? this.collapseIcon : '';
+        }
+        else {
+            return this.expandIcon ? this.expandIcon : '';
+        }
+    }
+    /**
+     * @hidden
+     */
+    get svgExpanderIndicatorClasses() {
         if (this.expanded) {
-            return this.collapseIcon ? this.collapseIcon : `k-icon k-i-chevron-up`;
+            return this.svgCollapseIcon ? this.svgCollapseIcon : undefined;
         }
         else {
-            return this.expandIcon ? this.expandIcon : `k-icon k-i-chevron-down`;
+            return this.svgExpandIcon ? this.svgExpandIcon : undefined;
         }
     }
     /**
@@ -7269,7 +7648,7 @@ class ExpansionPanelComponent {
     }
 }
 ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
+ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -7299,7 +7678,12 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 [ngTemplateOutlet]="titleTemplate?.templateRef">
             </ng-template>
             <span class="k-expander-indicator">
-                <span [ngClass]="indicatorClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="expanderIndicatorClasses"
+                    [customFontClass]="customExpanderIndicatorClasses"
+                    [svgIcon]="svgExpanderIndicatorClasses"
+                >
+                </kendo-icon-wrapper>
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
@@ -7307,7 +7691,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </div>
         </div>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -7344,7 +7728,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [ngTemplateOutlet]="titleTemplate?.templateRef">
             </ng-template>
             <span class="k-expander-indicator">
-                <span [ngClass]="indicatorClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="expanderIndicatorClasses"
+                    [customFontClass]="customExpanderIndicatorClasses"
+                    [svgIcon]="svgExpanderIndicatorClasses"
+                >
+                </kendo-icon-wrapper>
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
@@ -7362,6 +7751,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], svgExpandIcon: [{
+                type: Input
+            }], svgCollapseIcon: [{
+                type: Input
             }], expandIcon: [{
                 type: Input
             }], collapseIcon: [{
@@ -8891,14 +9284,14 @@ const declarations$a = [
 class AvatarModule {
 }
 AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule], exports: [AvatarComponent] });
-AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, imports: [[CommonModule]] });
+AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule, IconsModule], exports: [AvatarComponent] });
+AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$a],
                     exports: [exportedModules$a],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });
 
@@ -8979,19 +9372,19 @@ DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DrawerContentComponent, DrawerTemplateDirective,
         DrawerHeaderTemplateDirective,
         DrawerFooterTemplateDirective,
-        DrawerItemTemplateDirective], imports: [CommonModule], exports: [DrawerComponent,
+        DrawerItemTemplateDirective], imports: [CommonModule, IconsModule], exports: [DrawerComponent,
         DrawerContainerComponent,
         DrawerContentComponent, DrawerTemplateDirective,
         DrawerHeaderTemplateDirective,
         DrawerFooterTemplateDirective,
         DrawerItemTemplateDirective] });
-DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerModule, imports: [[CommonModule]] });
+DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$8],
                     exports: [exportedModules$8],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });
 
@@ -9010,15 +9403,15 @@ class ExpansionPanelModule {
 }
 ExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, declarations: [ExpansionPanelComponent,
-        ExpansionPanelTitleDirective], imports: [CommonModule, EventsModule], exports: [ExpansionPanelComponent,
+        ExpansionPanelTitleDirective], imports: [CommonModule, EventsModule, IconsModule], exports: [ExpansionPanelComponent,
         ExpansionPanelTitleDirective] });
-ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, imports: [[CommonModule, EventsModule]] });
+ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, imports: [[CommonModule, EventsModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$7],
                     exports: [exportedModules$7],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, IconsModule]
                 }]
         }] });
 
@@ -9050,18 +9443,18 @@ PanelBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         PanelBarItemComponent,
         PanelBarContentDirective,
         PanelBarItemTemplateDirective,
-        PanelBarItemTitleDirective], imports: [CommonModule], exports: [PanelBarComponent,
+        PanelBarItemTitleDirective], imports: [CommonModule, IconsModule], exports: [PanelBarComponent,
         PanelBarItemComponent,
         PanelBarContentDirective,
         PanelBarItemTemplateDirective,
         PanelBarItemTitleDirective] });
-PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PanelBarModule, imports: [[CommonModule]] });
+PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PanelBarModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PanelBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$6],
                     exports: [exportedModules$6],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });
 
@@ -9086,11 +9479,13 @@ class SplitterModule {
 SplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, declarations: [SplitterBarComponent, SplitterComponent,
         SplitterPaneComponent], imports: [CommonModule,
-        DraggableModule], exports: [SplitterComponent,
+        DraggableModule,
+        IconsModule], exports: [SplitterComponent,
         SplitterPaneComponent] });
 SplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, imports: [[
             CommonModule,
-            DraggableModule
+            DraggableModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, decorators: [{
             type: NgModule,
@@ -9099,7 +9494,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     exports: [exportedModules$5],
                     imports: [
                         CommonModule,
-                        DraggableModule
+                        DraggableModule,
+                        IconsModule
                     ]
                 }]
         }] });
@@ -9132,17 +9528,17 @@ StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         LocalizedStepperMessagesDirective, StepperComponent,
         StepperCustomMessagesComponent, StepperStepTemplateDirective,
         StepperLabelTemplateDirective,
-        StepperIndicatorTemplateDirective], imports: [CommonModule, ProgressBarModule], exports: [StepperComponent,
+        StepperIndicatorTemplateDirective], imports: [CommonModule, ProgressBarModule, IconsModule], exports: [StepperComponent,
         StepperCustomMessagesComponent, StepperStepTemplateDirective,
         StepperLabelTemplateDirective,
         StepperIndicatorTemplateDirective] });
-StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperModule, imports: [[CommonModule, ProgressBarModule]] });
+StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperModule, imports: [[CommonModule, ProgressBarModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$4],
                     exports: [exportedModules$4],
-                    imports: [CommonModule, ProgressBarModule]
+                    imports: [CommonModule, ProgressBarModule, IconsModule]
                 }]
         }] });
 
@@ -9178,20 +9574,20 @@ TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule], exports: [TabStripComponent,
+        LocalizedTabStripMessagesDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule], exports: [TabStripComponent,
         TabStripTabComponent,
         TabContentDirective,
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
         LocalizedTabStripMessagesDirective] });
-TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule]] });
+TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule, IconsModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$3],
                     exports: [exportedModules$3],
-                    imports: [CommonModule, ResizeSensorModule]
+                    imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule]
                 }]
         }] });