@progress/kendo-angular-treeview 11.0.0-develop.98 → 11.0.0-develop.99

package/drag-and-drop/drag-clue/drag-clue.component.d.ts

@@ -5,6 +5,7 @@
 import { TemplateRef, ChangeDetectorRef } from "@angular/core";
 import { DropAction } from '../models';
 import { TreeItemLookup } from '../../treeitem-lookup.interface';
+import { SVGIcon } from "@progress/kendo-svg-icons";
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -34,6 +35,7 @@ export declare class DragClueComponent {
     template: TemplateRef<any>;
     posistionStyle: string;
     get statusIconClass(): string;
+    get statusSVGIcon(): SVGIcon;
     constructor(cdr: ChangeDetectorRef);
     detectChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DragClueComponent, never>;

package/esm2020/drag-and-drop/drag-clue/drag-clue.component.mjs

@@ -4,8 +4,10 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, ChangeDetectorRef, ChangeDetectionStrategy } from "@angular/core";
 import { DropAction } from '../models';
+import { cancelIcon, insertBottomIcon, insertMiddleIcon, insertTopIcon, plusIcon } from "@progress/kendo-svg-icons";
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@progress/kendo-angular-icons";
+import * as i2 from "@angular/common";
 /**
  * @hidden
  */
@@ -17,12 +19,22 @@ export class DragClueComponent {
     }
     get statusIconClass() {
         switch (this.action) {
-            case DropAction.Add: return 'k-i-plus';
-            case DropAction.InsertTop: return 'k-i-insert-top';
-            case DropAction.InsertBottom: return 'k-i-insert-bottom';
-            case DropAction.InsertMiddle: return 'k-i-insert-middle';
+            case DropAction.Add: return 'plus';
+            case DropAction.InsertTop: return 'insert-top';
+            case DropAction.InsertBottom: return 'insert-bottom';
+            case DropAction.InsertMiddle: return 'insert-middle';
             case DropAction.Invalid:
-            default: return 'k-i-cancel';
+            default: return 'cancel';
+        }
+    }
+    get statusSVGIcon() {
+        switch (this.action) {
+            case DropAction.Add: return plusIcon;
+            case DropAction.InsertTop: return insertTopIcon;
+            case DropAction.InsertBottom: return insertBottomIcon;
+            case DropAction.InsertMiddle: return insertMiddleIcon;
+            case DropAction.Invalid:
+            default: return cancelIcon;
         }
     }
     // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
@@ -33,7 +45,12 @@ export class DragClueComponent {
 DragClueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DragClueComponent, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -48,7 +65,7 @@ DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         </ng-template>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, decorators: [{
             type: Component,
             args: [{
@@ -56,7 +73,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treeview-drag-clue',
                     template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460802,
+    publishDate: 1673466895,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/shared.module.mjs

@@ -26,6 +26,7 @@ import { DragAndDropEditingDirective } from './drag-and-drop/drag-and-drop-editi
 import { LoadMoreDirective } from './load-more/load-more.directive';
 import { LoadMoreButtonTemplateDirective } from './load-more/load-more-button-template.directive';
 import { InputsModule } from '@progress/kendo-angular-inputs';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const COMPONENT_DIRECTIVES = [
     TreeViewComponent,
@@ -76,7 +77,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         LoadMoreDirective,
         LoadMoreButtonTemplateDirective], imports: [CommonModule,
         CheckBoxModule,
-        InputsModule], exports: [TreeViewComponent,
+        InputsModule,
+        IconsModule], exports: [TreeViewComponent,
         TreeViewGroupComponent,
         TreeViewItemDirective,
         TreeViewItemContentDirective,
@@ -99,7 +101,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[
             CommonModule,
             CheckBoxModule,
-            InputsModule
+            InputsModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -109,7 +112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         CommonModule,
                         CheckBoxModule,
-                        InputsModule
+                        InputsModule,
+                        IconsModule
                     ],
                     entryComponents: [
                         DragClueComponent,

package/esm2020/treeview-group.component.mjs

@@ -15,6 +15,7 @@ import { LoadingNotificationService } from './loading-notification.service';
 import { Subscription, EMPTY, of } from 'rxjs';
 import { catchError, tap, finalize, filter } from 'rxjs/operators';
 import { DataChangeNotificationService } from './data-change-notification.service';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./expand-state.service";
 import * as i2 from "./loading-notification.service";
@@ -23,11 +24,12 @@ import * as i4 from "./treeview-lookup.service";
 import * as i5 from "./navigation/navigation.service";
 import * as i6 from "./node-children.service";
 import * as i7 from "./data-change-notification.service";
-import * as i8 from "./checkbox/checkbox.component";
-import * as i9 from "@angular/common";
-import * as i10 from "./treeview-item.directive";
-import * as i11 from "./loading-indicator.directive";
-import * as i12 from "./treeview-item-content.directive";
+import * as i8 from "@progress/kendo-angular-icons";
+import * as i9 from "./checkbox/checkbox.component";
+import * as i10 from "@angular/common";
+import * as i11 from "./treeview-item.directive";
+import * as i12 from "./loading-indicator.directive";
+import * as i13 from "./treeview-item-content.directive";
 const TOP_ITEM = 'k-treeview-top';
 const MID_ITEM = 'k-treeview-mid';
 const BOT_ITEM = 'k-treeview-bot';
@@ -44,6 +46,14 @@ export class TreeViewGroupComponent {
         this.nodeChildrenService = nodeChildrenService;
         this.dataChangeNotification = dataChangeNotification;
         this.changeDetectorRef = changeDetectorRef;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
         this.role = 'group';
         this.loadOnDemand = true;
@@ -62,6 +72,12 @@ export class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    getFontIcon(node, index) {
+        return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
+    }
+    getSvgIcon(node, index) {
+        return this.isExpanded(node, index) ? caretAltDownIcon : caretAltRightIcon;
+    }
     get moreNodesAvailable() {
         if (!isPresent(this.loadMoreService) || this.data.length === 0) {
             return false;
@@ -212,7 +228,7 @@ export class TreeViewGroupComponent {
             skip: this.data.length,
             take: this.loadMoreService.getInitialPageSize(this.parentDataItem)
         })
-            .pipe(finalize(() => this.loadingMoreNodes = false))
+            .pipe(finalize(() => this.loadingMoreNodes = true))
             .subscribe(items => {
             if (!(Array.isArray(items) && items.length > 0)) {
                 return;
@@ -301,12 +317,11 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -395,7 +410,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -420,7 +435,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </li>
-    `, isInline: true, components: [{ type: i8.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: i12.TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: i13.TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
         trigger('toggle', [
             transition('void => *', [
                 style({ height: 0 }),
@@ -479,12 +494,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -573,7 +587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span

package/esm2020/treeview.component.mjs

@@ -22,6 +22,7 @@ import { ExpandableComponent } from './expandable-component';
 import { SelectionService } from './selection/selection.service';
 import { TreeViewLookupService } from './treeview-lookup.service';
 import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem, getSizeClass } from './utils';
+import { searchIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./expand-state.service";
 import * as i2 from "./navigation/navigation.service";
@@ -31,8 +32,9 @@ import * as i5 from "./treeview-lookup.service";
 import * as i6 from "./data-change-notification.service";
 import * as i7 from "@progress/kendo-angular-l10n";
 import * as i8 from "@progress/kendo-angular-inputs";
-import * as i9 from "./treeview-group.component";
-import * as i10 from "@angular/common";
+import * as i9 from "@progress/kendo-angular-icons";
+import * as i10 from "./treeview-group.component";
+import * as i11 from "@angular/common";
 const LOAD_MORE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
 const providers = [
     ExpandStateService,
@@ -80,6 +82,10 @@ export class TreeViewComponent {
         this.renderer = renderer;
         this.dataChangeNotification = dataChangeNotification;
         this.localization = localization;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
         this.classNames = true;
         this.role = 'tree';
         /**
@@ -625,7 +631,12 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -656,7 +667,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i9.TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    `, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i10.TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -677,7 +688,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>

package/fesm2015/progress-kendo-angular-treeview.mjs

@@ -10,11 +10,14 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, of, Subscription, EMPTY, BehaviorSubject, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter, setter } from '@progress/kendo-common';
-import * as i8 from '@progress/kendo-angular-inputs';
+import { caretAltDownIcon, caretAltRightIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
+import * as i8$1 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, take, map } from 'rxjs/operators';
-import * as i9 from '@angular/common';
+import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Draggable } from '@progress/kendo-draggable';
 
@@ -25,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460802,
+    publishDate: 1673466895,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1525,6 +1528,14 @@ class TreeViewGroupComponent {
         this.nodeChildrenService = nodeChildrenService;
         this.dataChangeNotification = dataChangeNotification;
         this.changeDetectorRef = changeDetectorRef;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
         this.role = 'group';
         this.loadOnDemand = true;
@@ -1543,6 +1554,12 @@ class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    getFontIcon(node, index) {
+        return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
+    }
+    getSvgIcon(node, index) {
+        return this.isExpanded(node, index) ? caretAltDownIcon : caretAltRightIcon;
+    }
     get moreNodesAvailable() {
         if (!isPresent(this.loadMoreService) || this.data.length === 0) {
             return false;
@@ -1693,7 +1710,7 @@ class TreeViewGroupComponent {
             skip: this.data.length,
             take: this.loadMoreService.getInitialPageSize(this.parentDataItem)
         })
-            .pipe(finalize(() => this.loadingMoreNodes = false))
+            .pipe(finalize(() => this.loadingMoreNodes = true))
             .subscribe(items => {
             if (!(Array.isArray(items) && items.length > 0)) {
                 return;
@@ -1782,12 +1799,11 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -1876,7 +1892,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -1901,7 +1917,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </li>
-    `, isInline: true, components: [{ type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
         trigger('toggle', [
             transition('void => *', [
                 style({ height: 0 }),
@@ -1960,12 +1976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -2054,7 +2069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -2184,6 +2199,10 @@ class TreeViewComponent {
         this.renderer = renderer;
         this.dataChangeNotification = dataChangeNotification;
         this.localization = localization;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
         this.classNames = true;
         this.role = 'tree';
         /**
@@ -2729,7 +2748,12 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -2760,7 +2784,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    `, isInline: true, components: [{ type: i8$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2781,7 +2805,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -4110,12 +4139,22 @@ class DragClueComponent {
     }
     get statusIconClass() {
         switch (this.action) {
-            case DropAction.Add: return 'k-i-plus';
-            case DropAction.InsertTop: return 'k-i-insert-top';
-            case DropAction.InsertBottom: return 'k-i-insert-bottom';
-            case DropAction.InsertMiddle: return 'k-i-insert-middle';
+            case DropAction.Add: return 'plus';
+            case DropAction.InsertTop: return 'insert-top';
+            case DropAction.InsertBottom: return 'insert-bottom';
+            case DropAction.InsertMiddle: return 'insert-middle';
             case DropAction.Invalid:
-            default: return 'k-i-cancel';
+            default: return 'cancel';
+        }
+    }
+    get statusSVGIcon() {
+        switch (this.action) {
+            case DropAction.Add: return plusIcon;
+            case DropAction.InsertTop: return insertTopIcon;
+            case DropAction.InsertBottom: return insertBottomIcon;
+            case DropAction.InsertMiddle: return insertMiddleIcon;
+            case DropAction.Invalid:
+            default: return cancelIcon;
         }
     }
     // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
@@ -4126,7 +4165,12 @@ class DragClueComponent {
 DragClueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DragClueComponent, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4141,7 +4185,7 @@ DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         </ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, decorators: [{
             type: Component,
             args: [{
@@ -4149,7 +4193,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treeview-drag-clue',
                     template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4366,7 +4415,7 @@ DropHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         <ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropHintComponent, decorators: [{
             type: Component,
             args: [{
@@ -5370,7 +5419,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         LoadMoreDirective,
         LoadMoreButtonTemplateDirective], imports: [CommonModule,
         CheckBoxModule,
-        InputsModule], exports: [TreeViewComponent,
+        InputsModule,
+        IconsModule], exports: [TreeViewComponent,
         TreeViewGroupComponent,
         TreeViewItemDirective,
         TreeViewItemContentDirective,
@@ -5393,7 +5443,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[
             CommonModule,
             CheckBoxModule,
-            InputsModule
+            InputsModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -5403,7 +5454,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         CommonModule,
                         CheckBoxModule,
-                        InputsModule
+                        InputsModule,
+                        IconsModule
                     ],
                     entryComponents: [
                         DragClueComponent,

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

@@ -10,11 +10,14 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, of, Subscription, EMPTY, BehaviorSubject, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter, setter } from '@progress/kendo-common';
-import * as i8 from '@progress/kendo-angular-inputs';
+import { caretAltDownIcon, caretAltRightIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
+import * as i8$1 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { filter, tap, switchMap, delay, takeUntil, catchError, finalize, take, map } from 'rxjs/operators';
-import * as i9 from '@angular/common';
+import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Draggable } from '@progress/kendo-draggable';
 
@@ -25,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460802,
+    publishDate: 1673466895,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1521,6 +1524,14 @@ class TreeViewGroupComponent {
         this.nodeChildrenService = nodeChildrenService;
         this.dataChangeNotification = dataChangeNotification;
         this.changeDetectorRef = changeDetectorRef;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltRightIcon = caretAltRightIcon;
         this.kGroupClass = true;
         this.role = 'group';
         this.loadOnDemand = true;
@@ -1539,6 +1550,12 @@ class TreeViewGroupComponent {
         this.children = () => of([]);
         this.hasChildren = () => false;
     }
+    getFontIcon(node, index) {
+        return this.isExpanded(node, index) ? 'caret-alt-down' : 'caret-alt-right';
+    }
+    getSvgIcon(node, index) {
+        return this.isExpanded(node, index) ? caretAltDownIcon : caretAltRightIcon;
+    }
     get moreNodesAvailable() {
         if (!isPresent(this.loadMoreService) || this.data.length === 0) {
             return false;
@@ -1689,7 +1706,7 @@ class TreeViewGroupComponent {
             skip: this.data.length,
             take: this.loadMoreService.getInitialPageSize(this.parentDataItem)
         })
-            .pipe(finalize(() => this.loadingMoreNodes = false))
+            .pipe(finalize(() => this.loadingMoreNodes = true))
             .subscribe(items => {
             if (!(Array.isArray(items) && items.length > 0)) {
                 return;
@@ -1778,12 +1795,11 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -1872,7 +1888,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -1897,7 +1913,7 @@ TreeViewGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </li>
-    `, isInline: true, components: [{ type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["id", "isChecked", "node", "index", "labelText", "tabindex", "size"], outputs: ["checkStateChange"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { type: TreeViewItemContentDirective, selector: "[kendoTreeViewItemContent]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], animations: [
         trigger('toggle', [
             transition('void => *', [
                 style({ height: 0 }),
@@ -1956,12 +1972,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
-                    <span
-                        class="k-icon"
-                        [class.k-i-caret-alt-down]="isExpanded(node, nodeIndex(index))"
-                        [class.k-i-caret-alt-right]="!isExpanded(node, nodeIndex(index))"
-                    >
-                    </span>
+                    <kendo-icon-wrapper
+                        [name]="getFontIcon(node, nodeIndex(index))"
+                        [svgIcon]="getSvgIcon(node, nodeIndex(index))"
+                        >
+                    </kendo-icon-wrapper>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
@@ -2050,7 +2065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <div class="k-treeview-bot">
                 <span
                     *ngIf="loadingMoreNodes"
-                    class="k-icon k-i-loading k-i-caret-alt-right"
+                    class="k-icon k-i-loading"
                 >
                 </span>
                 <span
@@ -2180,6 +2195,10 @@ class TreeViewComponent {
         this.renderer = renderer;
         this.dataChangeNotification = dataChangeNotification;
         this.localization = localization;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
         this.classNames = true;
         this.role = 'tree';
         /**
@@ -2725,7 +2744,12 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -2756,7 +2780,7 @@ TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ul>
         <ng-container #assetsContainer></ng-container>
-    `, isInline: true, components: [{ type: i8.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    `, isInline: true, components: [{ type: i8$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2777,7 +2801,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [placeholder]="filterInputPlaceholder"
             >
                 <ng-template kendoTextBoxPrefixTemplate>
-                    <span class="k-input-icon k-icon k-i-search"></span>
+                    <kendo-icon-wrapper
+                        innerCssClass="k-input-icon"
+                        name="search"
+                        [svgIcon]="searchIcon"
+                        >
+                    </kendo-icon-wrapper>
                 </ng-template>
             </kendo-textbox>
         </span>
@@ -4021,12 +4050,22 @@ class DragClueComponent {
     }
     get statusIconClass() {
         switch (this.action) {
-            case DropAction.Add: return 'k-i-plus';
-            case DropAction.InsertTop: return 'k-i-insert-top';
-            case DropAction.InsertBottom: return 'k-i-insert-bottom';
-            case DropAction.InsertMiddle: return 'k-i-insert-middle';
+            case DropAction.Add: return 'plus';
+            case DropAction.InsertTop: return 'insert-top';
+            case DropAction.InsertBottom: return 'insert-bottom';
+            case DropAction.InsertMiddle: return 'insert-middle';
             case DropAction.Invalid:
-            default: return 'k-i-cancel';
+            default: return 'cancel';
+        }
+    }
+    get statusSVGIcon() {
+        switch (this.action) {
+            case DropAction.Add: return plusIcon;
+            case DropAction.InsertTop: return insertTopIcon;
+            case DropAction.InsertBottom: return insertBottomIcon;
+            case DropAction.InsertMiddle: return insertMiddleIcon;
+            case DropAction.Invalid:
+            default: return cancelIcon;
         }
     }
     // exposed as a public method that can be called from outside as the component uses `OnPush` strategy
@@ -4037,7 +4076,12 @@ class DragClueComponent {
 DragClueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DragClueComponent, selector: "kendo-treeview-drag-clue", host: { properties: { "class.k-header": "this.hostClasses", "class.k-drag-clue": "this.hostClasses", "style.position": "this.posistionStyle" } }, ngImport: i0, template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4052,7 +4096,7 @@ DragClueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         </ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DragClueComponent, decorators: [{
             type: Component,
             args: [{
@@ -4060,7 +4104,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treeview-drag-clue',
                     template: `
         <ng-container *ngIf="!template">
-            <span class="k-icon {{statusIconClass}} k-drag-status"></span>
+            <kendo-icon-wrapper
+                innerCssClass="k-drag-status"
+                [name]="statusIconClass"
+                [svgIcon]="statusSVGIcon"
+                >
+            </kendo-icon-wrapper>
             <span>{{text}}</span>
         </ng-container>
 
@@ -4277,7 +4326,7 @@ DropHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             }"
         >
         <ng-template>
-    `, isInline: true, directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropHintComponent, decorators: [{
             type: Component,
             args: [{
@@ -5362,7 +5411,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         LoadMoreDirective,
         LoadMoreButtonTemplateDirective], imports: [CommonModule,
         CheckBoxModule,
-        InputsModule], exports: [TreeViewComponent,
+        InputsModule,
+        IconsModule], exports: [TreeViewComponent,
         TreeViewGroupComponent,
         TreeViewItemDirective,
         TreeViewItemContentDirective,
@@ -5385,7 +5435,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[
             CommonModule,
             CheckBoxModule,
-            InputsModule
+            InputsModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -5395,7 +5446,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         CommonModule,
                         CheckBoxModule,
-                        InputsModule
+                        InputsModule,
+                        IconsModule
                     ],
                     entryComponents: [
                         DragClueComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-treeview",
-  "version": "11.0.0-develop.98",
+  "version": "11.0.0-develop.99",
   "description": "Kendo UI TreeView for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,10 +25,11 @@
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-draggable": "^3.0.2",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "11.0.0-develop.98",
-    "@progress/kendo-angular-inputs": "11.0.0-develop.98",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.98",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.98",
+    "@progress/kendo-angular-common": "11.0.0-develop.99",
+    "@progress/kendo-angular-inputs": "11.0.0-develop.99",
+    "@progress/kendo-angular-icons": "11.0.0-develop.99",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.99",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.99",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {

package/schematics/ngAdd/index.js

@@ -8,7 +8,9 @@ function default_1(options) {
             '@progress/kendo-angular-dialog': '^7.0.0',
             '@progress/kendo-angular-intl': '^4.0.0',
             '@progress/kendo-angular-popup': '^5.0.0',
-            '@progress/kendo-drawing': '^1.9.3'
+            '@progress/kendo-drawing': '^1.9.3',
+            // Peer dependency of icons
+            "@progress/kendo-svg-icons": "^1.0.0"
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/shared.module.d.ts

@@ -26,11 +26,12 @@ import * as i20 from "./load-more/load-more-button-template.directive";
 import * as i21 from "@angular/common";
 import * as i22 from "./checkbox/checkbox.module";
 import * as i23 from "@progress/kendo-angular-inputs";
+import * as i24 from "@progress/kendo-angular-icons";
 /**
  * @hidden
  */
 export declare class SharedModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.TreeViewComponent, typeof i2.TreeViewGroupComponent, typeof i3.TreeViewItemDirective, typeof i4.TreeViewItemContentDirective, typeof i5.NodeTemplateDirective, typeof i6.CheckDirective, typeof i7.DisableDirective, typeof i8.ExpandDirective, typeof i9.SelectDirective, typeof i10.HierarchyBindingDirective, typeof i11.LoadingIndicatorDirective, typeof i12.FlatDataBindingDirective, typeof i13.DragAndDropDirective, typeof i14.DragClueTemplateDirective, typeof i15.DragClueComponent, typeof i16.DropHintTemplateDirective, typeof i17.DropHintComponent, typeof i18.DragAndDropEditingDirective, typeof i19.LoadMoreDirective, typeof i20.LoadMoreButtonTemplateDirective], [typeof i21.CommonModule, typeof i22.CheckBoxModule, typeof i23.InputsModule], [typeof i1.TreeViewComponent, typeof i2.TreeViewGroupComponent, typeof i3.TreeViewItemDirective, typeof i4.TreeViewItemContentDirective, typeof i5.NodeTemplateDirective, typeof i6.CheckDirective, typeof i7.DisableDirective, typeof i8.ExpandDirective, typeof i9.SelectDirective, typeof i10.HierarchyBindingDirective, typeof i11.LoadingIndicatorDirective, typeof i12.FlatDataBindingDirective, typeof i13.DragAndDropDirective, typeof i14.DragClueTemplateDirective, typeof i15.DragClueComponent, typeof i16.DropHintTemplateDirective, typeof i17.DropHintComponent, typeof i18.DragAndDropEditingDirective, typeof i19.LoadMoreDirective, typeof i20.LoadMoreButtonTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.TreeViewComponent, typeof i2.TreeViewGroupComponent, typeof i3.TreeViewItemDirective, typeof i4.TreeViewItemContentDirective, typeof i5.NodeTemplateDirective, typeof i6.CheckDirective, typeof i7.DisableDirective, typeof i8.ExpandDirective, typeof i9.SelectDirective, typeof i10.HierarchyBindingDirective, typeof i11.LoadingIndicatorDirective, typeof i12.FlatDataBindingDirective, typeof i13.DragAndDropDirective, typeof i14.DragClueTemplateDirective, typeof i15.DragClueComponent, typeof i16.DropHintTemplateDirective, typeof i17.DropHintComponent, typeof i18.DragAndDropEditingDirective, typeof i19.LoadMoreDirective, typeof i20.LoadMoreButtonTemplateDirective], [typeof i21.CommonModule, typeof i22.CheckBoxModule, typeof i23.InputsModule, typeof i24.IconsModule], [typeof i1.TreeViewComponent, typeof i2.TreeViewGroupComponent, typeof i3.TreeViewItemDirective, typeof i4.TreeViewItemContentDirective, typeof i5.NodeTemplateDirective, typeof i6.CheckDirective, typeof i7.DisableDirective, typeof i8.ExpandDirective, typeof i9.SelectDirective, typeof i10.HierarchyBindingDirective, typeof i11.LoadingIndicatorDirective, typeof i12.FlatDataBindingDirective, typeof i13.DragAndDropDirective, typeof i14.DragClueTemplateDirective, typeof i15.DragClueComponent, typeof i16.DropHintTemplateDirective, typeof i17.DropHintComponent, typeof i18.DragAndDropEditingDirective, typeof i19.LoadMoreDirective, typeof i20.LoadMoreButtonTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedModule>;
 }

package/treeview-group.component.d.ts

@@ -14,6 +14,7 @@ import { CheckedState } from './checkbox/checked-state';
 import { Observable } from 'rxjs';
 import { DataChangeNotificationService } from './data-change-notification.service';
 import { TreeViewSize } from './size';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -27,6 +28,14 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
     protected nodeChildrenService: NodeChildrenService;
     protected dataChangeNotification: DataChangeNotificationService;
     protected changeDetectorRef: ChangeDetectorRef;
+    /**
+     * @hidden
+     */
+    caretAltDownIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    caretAltRightIcon: SVGIcon;
     kGroupClass: boolean;
     role: string;
     checkboxes: boolean;
@@ -49,6 +58,8 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
     initialNodesLoaded: boolean;
     loadingMoreNodes: boolean;
     isItemExpandable: (node: any, index: any) => boolean;
+    getFontIcon(node: any, index: any): string;
+    getSvgIcon(node: any, index: any): SVGIcon;
     get moreNodesAvailable(): boolean;
     get pageSize(): number;
     set pageSize(pageSize: number);

package/treeview.component.d.ts

@@ -22,6 +22,7 @@ import { LoadMoreService } from './load-more/load-more.service';
 import { TreeItemDropEvent, TreeItemAddRemoveArgs, EditService, TreeItemDragEvent, TreeItemDragStartEvent } from './drag-and-drop/models';
 import { FilterState } from './filter-state.interface';
 import { TreeViewSize } from './size';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
@@ -45,6 +46,10 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
     private renderer;
     private dataChangeNotification;
     private localization;
+    /**
+     * @hidden
+     */
+    searchIcon: SVGIcon;
     classNames: boolean;
     role: string;
     /** @hidden */