@progress/kendo-angular-dropdowns 11.0.0-develop.92 → 11.0.0-develop.93

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

@@ -4,20 +4,23 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ViewChild, HostBinding, Directive, Injectable, InjectionToken, HostListener, ViewChildren, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i9 from '@progress/kendo-angular-common';
+import * as i10 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, KendoInput, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
-import * as i12 from '@angular/forms';
+import * as i13 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter as getter$1, detectDesktopBrowser, detectMobileOS, pointers, touchEnabled } from '@progress/kendo-common';
 import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { xIcon, caretAltDownIcon, searchIcon, xCircleIcon, plusIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 export { PopupComponent } from '@progress/kendo-angular-popup';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil } from 'rxjs/operators';
-import * as i11 from '@angular/common';
+import * as i12 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@progress/kendo-angular-treeview';
 import { DataBoundComponent, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, ExpandDirective, TreeViewModule } from '@progress/kendo-angular-treeview';
@@ -29,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673253284,
+    publishDate: 1673265672,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -583,7 +586,7 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.aria-busy]="isLoading"
             [attr.aria-invalid]="formControl?.invalid"
         />
-   `, isInline: true, directives: [{ type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+   `, isInline: true, directives: [{ type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2210,7 +2213,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </div>
     </div>
     </div>
-  `, isInline: true, components: [{ type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, components: [{ type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2501,6 +2504,10 @@ class AutoCompleteComponent {
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         /**
          * Defines whether the first match from the suggestions list will be automatically focused.
          * By default, `highlightFirst` is set to `true`.
@@ -3380,7 +3387,11 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (click)="clearValue($event)"
             (mousedown)="$event.preventDefault()"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
@@ -3431,7 +3442,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -3496,7 +3507,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (click)="clearValue($event)"
             (mousedown)="$event.preventDefault()"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
@@ -3763,6 +3778,14 @@ class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
         this.selected = [];
         /**
          * @hidden
@@ -4468,7 +4491,7 @@ class ComboBoxComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-caret-alt-down';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass;
     }
     /**
      * @hidden
@@ -5014,7 +5037,11 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             #select
@@ -5028,7 +5055,13 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
         <ng-template #popupTemplate>
             <!--header template-->
@@ -5078,7 +5111,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5145,7 +5178,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             #select
@@ -5159,7 +5196,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
         <ng-template #popupTemplate>
             <!--header template-->
@@ -5453,6 +5496,14 @@ class DropDownListComponent {
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -6115,7 +6166,7 @@ class DropDownListComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-caret-alt-down';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass;
     }
     /**
      * @hidden
@@ -6644,12 +6695,15 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 mousedown: onMouseDown
             }"
         >
-            <span
-                class="k-button-icon k-icon"
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
                 unselectable="on"
-                [ngClass]="buttonClasses"
-            ></span>
-        </button>
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            </button>
         <ng-template #popupTemplate>
             <!--filterable-->
 
@@ -6659,7 +6713,12 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                         class="k-searchbox k-input"
                         [ngClass]="filterInputClasses"
                     >
-                        <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                         <input
                             role="searchbox"
                             aria-autocomplete="list"
@@ -6752,7 +6811,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -6807,12 +6866,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 mousedown: onMouseDown
             }"
         >
-            <span
-                class="k-button-icon k-icon"
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
                 unselectable="on"
-                [ngClass]="buttonClasses"
-            ></span>
-        </button>
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            </button>
         <ng-template #popupTemplate>
             <!--filterable-->
 
@@ -6822,7 +6884,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         class="k-searchbox k-input"
                         [ngClass]="filterInputClasses"
                     >
-                        <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                         <input
                             role="searchbox"
                             aria-autocomplete="list"
@@ -7237,6 +7304,10 @@ class TagListComponent {
     constructor(renderer, hostElement) {
         this.renderer = renderer;
         this.hostElement = hostElement;
+        /**
+         * @hidden
+         */
+        this.xCircleIcon = xCircleIcon;
         this.rounded = 'medium';
         this.fillMode = 'solid';
         /**
@@ -7356,16 +7427,19 @@ TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                     </span>
                 </ng-template>
             </span>
-
             <span class="k-chip-actions">
                 <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
-                    <span class="k-icon k-i-x-circle" (mousedown)="deleteTag($event, tag, index)">
-                    </span>
+                    <kendo-icon-wrapper
+                        (mousedown)="deleteTag($event, tag, index)"
+                        name="x-circle"
+                        [svgIcon]="xCircleIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </span>
             </span>
         </div>
         <ng-content></ng-content>
-  `, isInline: true, directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagListComponent, decorators: [{
             type: Component,
             args: [{
@@ -7416,11 +7490,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     </span>
                 </ng-template>
             </span>
-
             <span class="k-chip-actions">
                 <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
-                    <span class="k-icon k-i-x-circle" (mousedown)="deleteTag($event, tag, index)">
-                    </span>
+                    <kendo-icon-wrapper
+                        (mousedown)="deleteTag($event, tag, index)"
+                        name="x-circle"
+                        [svgIcon]="xCircleIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </span>
             </span>
         </div>
@@ -7510,6 +7587,14 @@ class MultiSelectComponent {
         this.renderer = renderer;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
+        /**
+         * @hidden
+         */
+        this.plusIcon = plusIcon;
         this.listBoxId = guid();
         this.tagListId = guid();
         this.tagPrefix = "tag-" + guid();
@@ -8957,7 +9042,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             tabindex="-1"
             (mousedown)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -8985,7 +9075,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                         }">
                     </ng-template>
                     <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <span class="k-icon k-i-plus" [style]="'float: right;'"></span>
+                    <kendo-icon-wrapper
+                        class="k-icon"
+                        name="plus"
+                        [svgIcon]="plusIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </div>
             </div>
             <!--list-->
@@ -9032,7 +9127,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -9113,7 +9208,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             tabindex="-1"
             (mousedown)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -9141,7 +9241,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         }">
                     </ng-template>
                     <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <span class="k-icon k-i-plus" [style]="'float: right;'"></span>
+                    <kendo-icon-wrapper
+                        class="k-icon"
+                        name="plus"
+                        [svgIcon]="plusIcon"
+                    >
+                    </kendo-icon-wrapper>
                 </div>
             </div>
             <!--list-->
@@ -9672,7 +9777,11 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
 
         <button
@@ -9688,7 +9797,13 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
 
         <ng-template #popupTemplate>
@@ -9844,7 +9959,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -9921,7 +10036,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
 
         <button
@@ -9937,7 +10056,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading && !iconClass"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
+            <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
 
         <ng-template #popupTemplate>
@@ -10159,6 +10284,18 @@ class DropDownTreeComponent {
         this.cdr = cdr;
         this.localization = localization;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.hostClasses = true;
         this.role = 'combobox';
         this.ariaHasPopup = 'tree';
@@ -10859,7 +10996,7 @@ class DropDownTreeComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : 'k-i-caret-alt-down';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : null;
     }
     /**
      * @hidden
@@ -11159,7 +11296,12 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             tabindex="-1"
@@ -11169,10 +11311,13 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [ngClass]="selectButtonClasses"
             [attr.aria-label]="messageFor('selectButtonText')"
         >
-            <span
-                class="k-button-icon k-icon"
-                [ngClass]="buttonClasses"
-            ></span>
+            <span *ngIf="loading" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <span
@@ -11184,7 +11329,12 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     [ngClass]="filterInputClasses"
                 >
                     <span class="k-input-prefix">
-                        <span class="k-input-icon k-icon k-i-search"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                     </span>
                     <input
                         #filterInput
@@ -11260,7 +11410,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -11328,7 +11478,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <button
             tabindex="-1"
@@ -11338,10 +11493,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [ngClass]="selectButtonClasses"
             [attr.aria-label]="messageFor('selectButtonText')"
         >
-            <span
-                class="k-button-icon k-icon"
-                [ngClass]="buttonClasses"
-            ></span>
+            <span *ngIf="loading" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="!loading"
+                name="caret-alt-down"
+                [svgIcon]="caretAltDownIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <span
@@ -11353,7 +11511,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [ngClass]="filterInputClasses"
                 >
                     <span class="k-input-prefix">
-                        <span class="k-input-icon k-icon k-i-search"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                     </span>
                     <input
                         #filterInput
@@ -12050,6 +12213,14 @@ class MultiSelectTreeComponent {
         this.cdr = cdr;
         this.lookup = lookup;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.searchIcon = searchIcon;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         this.hostClasses = true;
         this.role = 'combobox';
         this.ariaHasPopup = 'tree';
@@ -13359,7 +13530,12 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             tabindex="-1"
             (click)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -13376,7 +13552,12 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                     [ngClass]="filterInputClasses"
                 >
                     <span class="k-input-prefix">
-                        <span class="k-input-icon k-icon k-i-search"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                     </span>
                     <input
                         #filterInput
@@ -13486,7 +13667,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -13564,7 +13745,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             tabindex="-1"
             (click)="clearAll($event)"
         >
-            <span class="k-icon k-i-x"></span>
+            <kendo-icon-wrapper
+                class="k-icon"
+                name="x"
+                [svgIcon]="xIcon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span
             *ngIf="loading"
@@ -13581,7 +13767,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [ngClass]="filterInputClasses"
                 >
                     <span class="k-input-prefix">
-                        <span class="k-input-icon k-icon k-i-search"></span>
+                        <kendo-icon-wrapper
+                            class="k-icon"
+                            name="search"
+                            [svgIcon]="searchIcon"
+                        >
+                        </kendo-icon-wrapper>
                     </span>
                     <input
                         #filterInput
@@ -14312,21 +14503,21 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], exports: [ListComponent,
+        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], exports: [ListComponent,
         ListItemDirective,
         SelectableDirective,
         SearchBarComponent,
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
+        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_DIRECTIVES],
-                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule]
+                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule]
                 }]
         }] });