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

package/autocomplete/autocomplete.component.d.ts

@@ -27,6 +27,7 @@ import { PageChangeEvent } from '../common/models/page-change-event';
 import { DropDownSize } from '../common/models/size';
 import { DropDownRounded } from '../common/models/rounded';
 import { DropDownFillMode } from '../common/models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -64,6 +65,10 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private renderer;
     private hostElement;
     protected touchEnabled: boolean;
+    /**
+     * @hidden
+     */
+    xIcon: SVGIcon;
     get width(): any;
     get height(): any;
     get listContainerClasses(): Object;

package/comboboxes/combobox.component.d.ts

@@ -28,6 +28,7 @@ import { PageChangeEvent } from '../common/models/page-change-event';
 import { DropDownSize } from '../common/models/size';
 import { DropDownRounded } from '../common/models/rounded';
 import { DropDownFillMode } from '../common/models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -62,6 +63,14 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     protected cdr: ChangeDetectorRef;
     protected renderer: Renderer2;
     protected touchEnabled: boolean;
+    /**
+     * @hidden
+     */
+    xIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    caretAltDownIcon: SVGIcon;
     set text(text: any);
     get text(): any;
     /**

package/common/shared.module.d.ts

@@ -16,11 +16,12 @@ import * as i10 from "@angular/forms";
 import * as i11 from "@progress/kendo-angular-popup";
 import * as i12 from "@progress/kendo-angular-common";
 import * as i13 from "./shared-directives.module";
+import * as i14 from "@progress/kendo-angular-icons";
 /**
  * @hidden
  */
 export declare class SharedModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule], [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective, typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule, typeof i14.IconsModule], [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective, typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule, typeof i14.IconsModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedModule>;
 }

package/common/taglist.component.d.ts

@@ -8,6 +8,7 @@ import { GroupTagTemplateDirective } from '../common/templates/group-tag-templat
 import { DropDownSize } from './models/size';
 import { DropDownRounded } from './models/rounded';
 import { DropDownFillMode } from './models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -15,6 +16,10 @@ import * as i0 from "@angular/core";
 export declare class TagListComponent {
     private renderer;
     private hostElement;
+    /**
+     * @hidden
+     */
+    xCircleIcon: SVGIcon;
     tags: any[];
     textField: string | string[];
     valueField: string | string[];

package/dropdownlist/dropdownlist.component.d.ts

@@ -28,6 +28,7 @@ import { PageChangeEvent } from '../common/models/page-change-event';
 import { DropDownSize } from '../common/models/size';
 import { DropDownRounded } from '../common/models/rounded';
 import { DropDownFillMode } from '../common/models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -63,6 +64,14 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private cdr;
     touchEnabled: boolean;
     private injector;
+    /**
+     * @hidden
+     */
+    searchIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    caretAltDownIcon: SVGIcon;
     get width(): any;
     get height(): any;
     get widgetTabIndex(): number;

package/dropdowntrees/dropdowntree.component.d.ts

@@ -20,6 +20,7 @@ import { ValueTemplateDirective } from '../common/templates/value-template.direc
 import { DropDownSize } from '../common/models/size';
 import { DropDownRounded } from '../common/models/rounded';
 import { DropDownFillMode } from '../common/models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
@@ -34,6 +35,18 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private cdr;
     private localization;
     touchEnabled: boolean;
+    /**
+     * @hidden
+     */
+    searchIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    caretAltDownIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    xIcon: SVGIcon;
     hostClasses: boolean;
     get hostAriaInvalid(): string;
     get isDisabled(): boolean;

package/dropdowntrees/multiselecttree.component.d.ts

@@ -25,6 +25,7 @@ import { DropDownSize } from '../common/models/size';
 import { DropDownRounded } from '../common/models/rounded';
 import { DropDownFillMode } from '../common/models/fillmode';
 import { MultiSelectTreeLookupService } from './lookup/lookup.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
@@ -40,6 +41,14 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private cdr;
     private lookup;
     touchEnabled: boolean;
+    /**
+     * @hidden
+     */
+    searchIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    xIcon: SVGIcon;
     hostClasses: boolean;
     get isDisabled(): boolean;
     get hostAriaControls(): string;

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -28,6 +28,7 @@ import { DataService } from '../common/data.service';
 import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
+import { xIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/data.service";
@@ -36,11 +37,12 @@ import * as i4 from "../common/selection/selection.service";
 import * as i5 from "../common/navigation/navigation.service";
 import * as i6 from "../common/disabled-items/disabled-items.service";
 import * as i7 from "../common/searchbar.component";
-import * as i8 from "../common/list.component";
-import * as i9 from "@progress/kendo-angular-common";
-import * as i10 from "../common/localization/localized-messages.directive";
-import * as i11 from "@angular/common";
-import * as i12 from "../common/templates/template-context.directive";
+import * as i8 from "@progress/kendo-angular-icons";
+import * as i9 from "../common/list.component";
+import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "../common/localization/localized-messages.directive";
+import * as i12 from "@angular/common";
+import * as i13 from "../common/templates/template-context.directive";
 const NO_VALUE = "";
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -86,6 +88,10 @@ export 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`.
@@ -965,7 +971,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>
@@ -1016,7 +1026,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: i7.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.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: i10.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: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.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: i9.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: i11.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: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1081,7 +1091,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>

package/esm2020/comboboxes/combobox.component.mjs

@@ -32,6 +32,7 @@ import { DataService } from '../common/data.service';
 import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { pointers } from '@progress/kendo-common';
+import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
@@ -40,11 +41,12 @@ import * as i4 from "../common/navigation/navigation.service";
 import * as i5 from "../common/disabled-items/disabled-items.service";
 import * as i6 from "../common/data.service";
 import * as i7 from "../common/searchbar.component";
-import * as i8 from "../common/list.component";
-import * as i9 from "@progress/kendo-angular-common";
-import * as i10 from "../common/localization/localized-messages.directive";
-import * as i11 from "@angular/common";
-import * as i12 from "../common/templates/template-context.directive";
+import * as i8 from "@progress/kendo-angular-icons";
+import * as i9 from "../common/list.component";
+import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "../common/localization/localized-messages.directive";
+import * as i12 from "@angular/common";
+import * as i13 from "../common/templates/template-context.directive";
 /**
  * @hidden
  */
@@ -86,6 +88,14 @@ export class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
         this.selected = [];
         /**
          * @hidden
@@ -791,7 +801,7 @@ export 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
@@ -1337,7 +1347,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
@@ -1351,7 +1365,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-->
@@ -1401,7 +1421,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: i7.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.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: i10.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: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.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: i9.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: i11.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: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1468,7 +1488,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
@@ -1482,7 +1506,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-->

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -26,11 +26,12 @@ import * as i4 from "../common/navigation/navigation.service";
 import * as i5 from "../common/disabled-items/disabled-items.service";
 import * as i6 from "../common/data.service";
 import * as i7 from "../common/searchbar.component";
-import * as i8 from "../common/list.component";
-import * as i9 from "@progress/kendo-angular-common";
-import * as i10 from "../common/localization/localized-messages.directive";
-import * as i11 from "@angular/common";
-import * as i12 from "../common/templates/template-context.directive";
+import * as i8 from "@progress/kendo-angular-icons";
+import * as i9 from "../common/list.component";
+import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "../common/localization/localized-messages.directive";
+import * as i12 from "@angular/common";
+import * as i13 from "../common/templates/template-context.directive";
 /**
  * Represents the [Kendo UI MultiColumnComboBox component for Angular]({% slug overview_multicolumncombobox %}).
  */
@@ -223,7 +224,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
@@ -239,7 +244,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>
@@ -395,7 +406,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: i7.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.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: i10.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: i12.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: i7.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: i9.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: i11.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: i13.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: [{
@@ -472,7 +483,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
@@ -488,7 +503,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>

package/esm2020/common/shared.module.mjs

@@ -16,6 +16,7 @@ import { SelectableDirective } from './selection/selectable.directive';
 import { TemplateContextDirective } from './templates/template-context.directive';
 import { CheckDirective } from '../dropdowntrees/checked-state/check.directive';
 import { CheckAllDirective } from '../dropdowntrees/checked-state/check-all.directive';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const INTERNAL_DIRECTIVES = [
     ListComponent,
@@ -40,20 +41,20 @@ 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]
                 }]
         }] });

package/esm2020/common/taglist.component.mjs

@@ -6,9 +6,11 @@ import { Component, Input, Output, EventEmitter, HostBinding, Renderer2, Element
 import { TagTemplateDirective } from '../common/templates/tag-template.directive';
 import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
 import { getSizeClass, getter, isPresent } from '../common/util';
+import { xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./templates/template-context.directive";
+import * as i1 from "@progress/kendo-angular-icons";
+import * as i2 from "@angular/common";
+import * as i3 from "./templates/template-context.directive";
 /**
  * @hidden
  */
@@ -16,6 +18,10 @@ export class TagListComponent {
     constructor(renderer, hostElement) {
         this.renderer = renderer;
         this.hostElement = hostElement;
+        /**
+         * @hidden
+         */
+        this.xCircleIcon = xCircleIcon;
         this.rounded = 'medium';
         this.fillMode = 'solid';
         /**
@@ -135,16 +141,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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TagListComponent, decorators: [{
             type: Component,
             args: [{
@@ -195,11 +204,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>