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

package/esm2020/expansionpanel/expansionpanel.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { AnimationBuilder } from '@angular/animations';
 import { isFocusable, hasClass } from './../common/dom-queries';
-import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, ElementRef, Renderer2, NgZone, ViewChild } from '@angular/core';
+import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, ElementRef, Renderer2, NgZone, ViewChild, isDevMode } from '@angular/core';
 import { ExpansionPanelTitleDirective } from './expansionpanel-title.directive';
 import { collapse, expand } from './animations';
 import { isPresent } from '../common/util';
@@ -18,7 +18,8 @@ import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/animations";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@angular/common";
 const DEFAULT_DURATION = 200;
 const CONTENT_HIDDEN_CLASS = 'k-hidden';
 /**
@@ -125,6 +126,32 @@ export 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;
     }
@@ -208,12 +235,34 @@ export 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;
         }
     }
     /**
@@ -293,7 +342,7 @@ export 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: i2.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,
@@ -323,7 +372,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">
@@ -331,7 +385,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: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -368,7 +422,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">
@@ -386,6 +445,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: [{

package/esm2020/expansionpanel.module.mjs

@@ -5,6 +5,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { EventsModule } from '@progress/kendo-angular-common';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { ExpansionPanelTitleDirective } from './expansionpanel/expansionpanel-title.directive';
 import { ExpansionPanelComponent } from './expansionpanel/expansionpanel.component';
 import * as i0 from "@angular/core";
@@ -23,14 +24,14 @@ export 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],
                     exports: [exportedModules],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, IconsModule]
                 }]
         }] });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export 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'
 };

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

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, TemplateRef, QueryList, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { animate, trigger, style, state, transition, AUTO_STYLE } from '@angular/animations';
 import { PanelBarService } from "./panelbar.service";
@@ -10,9 +11,11 @@ import { PanelBarItemTitleDirective } from "./panelbar-item-title.directive";
 import { isFocusable } from '../common/dom-queries';
 import { Subscription } from 'rxjs';
 import { PanelBarExpandMode } from './panelbar-expand-mode';
+import { arrowDownIcon, arrowUpIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./panelbar.service";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
@@ -61,6 +64,14 @@ export 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(() => { });
@@ -70,6 +81,19 @@ export 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)).
      */
@@ -161,10 +185,30 @@ export 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
@@ -177,6 +221,7 @@ export class PanelBarItemComponent {
             focused: this.focused,
             icon: this.icon,
             iconClass: this.iconClass,
+            svgIcon: this.svgIcon,
             id: this.id,
             imageUrl: this.imageUrl,
             selected: this.selected,
@@ -239,7 +284,7 @@ export 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: i1.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"
@@ -247,11 +292,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"
@@ -266,6 +314,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                         id: id,
                         icon: icon,
                         iconClass: iconClass,
+                        svgIcon: svgIcon,
                         imageUrl: imageUrl,
                         selected: selected,
                         expanded: expanded,
@@ -274,10 +323,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
@@ -323,6 +375,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"
@@ -353,7 +406,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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.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', [
@@ -392,11 +445,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"
@@ -411,6 +467,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,
@@ -419,10 +476,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
@@ -468,6 +528,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"
@@ -514,6 +575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], imageUrl: [{
                 type: Input
             }], disabled: [{

package/esm2020/panelbar/panelbar.component.mjs

@@ -499,6 +499,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"
@@ -510,7 +511,7 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 </kendo-panelbar-item>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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: [{
@@ -533,6 +534,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"

package/esm2020/panelbar.module.mjs

@@ -9,6 +9,7 @@ import { PanelBarItemComponent } from './panelbar/panelbar-item.component';
 import { PanelBarContentDirective } from './panelbar/panelbar-content.directive';
 import { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
 import { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const exportedModules = [
     PanelBarComponent,
@@ -38,17 +39,17 @@ 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],
                     exports: [exportedModules],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });

package/esm2020/splitter/splitter-bar.component.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ElementRef, Host, HostBinding, Input, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { DraggableDirective, Keys } from '@progress/kendo-angular-common';
@@ -9,11 +10,13 @@ import { SplitterService } from './splitter.service';
 import { Subscription, of } from 'rxjs';
 import { delay, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
 import { shouldToggleOrResize } from './util';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-common";
-import * as i2 from "./splitter.service";
-import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./splitter.service";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@angular/common";
 const stopPropagation = ({ originalEvent: event }) => {
     event.stopPropagation();
     event.preventDefault();
@@ -31,11 +34,11 @@ const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
  * @hidden
  */
 export 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;
@@ -125,26 +128,60 @@ export 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();
@@ -178,33 +215,33 @@ export class SplitterBarComponent {
         }
     }
 }
-SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.SplitterService }, { token: i3.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.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.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.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: i2.SplitterService }, { type: i3.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { orientation: [{
+                }] }, { type: i2.LocalizationService }, { type: i3.SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { orientation: [{
                 type: Input
             }, {
                 type: HostBinding,