@progress/kendo-angular-treelist 11.0.0-develop.99 → 11.0.0

package/esm2020/column-menu/column-menu-lock.component.mjs

@@ -6,6 +6,7 @@ import { Component, ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { lockIcon, unlockIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
@@ -31,6 +32,8 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
         this.localization = localization;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
+        this.unlockIcon = unlockIcon;
+        this.lockIcon = lockIcon;
     }
     get text() {
         return this.localization.get(this.locked ? 'unlock' : 'lock');
@@ -38,6 +41,9 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
     get icon() {
         return this.locked ? 'unlock' : 'lock';
     }
+    get svgIcon() {
+        return this.locked ? this.unlockIcon : this.lockIcon;
+    }
     get disabled() {
         return !this.locked && this.columnInfoService.unlockedRootCount < 2;
     }
@@ -72,15 +78,25 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
 }
 ColumnMenuLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock", usesInheritance: true, ngImport: i0, template: `
-       <kendo-treelist-columnmenu-item [text]="text" [icon]="icon" (itemClick)="toggleColumn()" [disabled]="disabled">
+       <kendo-treelist-columnmenu-item
+           [text]="text"
+           [icon]="icon"
+           [svgIcon]="svgIcon"
+           (itemClick)="toggleColumn()"
+           [disabled]="disabled">
        </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-lock',
                     template: `
-       <kendo-treelist-columnmenu-item [text]="text" [icon]="icon" (itemClick)="toggleColumn()" [disabled]="disabled">
+       <kendo-treelist-columnmenu-item
+           [text]="text"
+           [icon]="icon"
+           [svgIcon]="svgIcon"
+           (itemClick)="toggleColumn()"
+           [disabled]="disabled">
        </kendo-treelist-columnmenu-item>
     `
                 }]

package/esm2020/column-menu/column-menu-sort.component.mjs

@@ -7,6 +7,7 @@ import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SortService } from '../common/sort.service';
 import { normalize } from '../columns/sort-settings';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/sort.service";
@@ -31,6 +32,8 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
         super();
         this.localization = localization;
         this.sortService = sortService;
+        this.sortAscSmallIcon = sortAscSmallIcon;
+        this.sortDescSmallIcon = sortDescSmallIcon;
     }
     get sortedAsc() {
         const descriptor = this.descriptor;
@@ -65,23 +68,39 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
 }
 ColumnMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuSortComponent, deps: [{ token: i1.LocalizationService }, { token: i2.SortService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort", usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortAscending')"
-            icon="sort-asc-small" (itemClick)="toggleSort('asc')" [selected]="sortedAsc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortAscending')"
+            icon="sort-asc-small"
+            [svgIcon]="sortAscSmallIcon"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
         </kendo-treelist-columnmenu-item>
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortDescending')"
-            icon="sort-desc-small" (itemClick)="toggleSort('desc')" [selected]="sortedDesc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortDescending')"
+            icon="sort-desc-small"
+            [svgIcon]="sortDescSmallIcon"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuSortComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-sort',
                     template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortAscending')"
-            icon="sort-asc-small" (itemClick)="toggleSort('asc')" [selected]="sortedAsc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortAscending')"
+            icon="sort-asc-small"
+            [svgIcon]="sortAscSmallIcon"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
         </kendo-treelist-columnmenu-item>
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortDescending')"
-            icon="sort-desc-small" (itemClick)="toggleSort('desc')" [selected]="sortedDesc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortDescending')"
+            icon="sort-desc-small"
+            [svgIcon]="sortDescSmallIcon"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
         </kendo-treelist-columnmenu-item>
     `
                 }]

package/esm2020/column-menu/column-menu.component.mjs

@@ -8,15 +8,17 @@ import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { filtersByField } from '../filtering/base-filter-cell.component';
 import { hasFilter, hasSort, hasLock, hasColumnChooser } from './utils';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/single-popup.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./column-menu.service";
-import * as i4 from "./column-menu-sort.component";
-import * as i5 from "./column-menu-lock.component";
-import * as i6 from "./column-menu-chooser.component";
-import * as i7 from "./column-menu-filter.component";
-import * as i8 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./column-menu-sort.component";
+import * as i6 from "./column-menu-lock.component";
+import * as i7 from "./column-menu-chooser.component";
+import * as i8 from "./column-menu-filter.component";
+import * as i9 from "@angular/common";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
  * Represents the [column menu]({% slug columnmenu_treelist %}) component.
@@ -46,6 +48,7 @@ export class ColumnMenuComponent {
          * @hidden
          */
         this.expandedColumns = false;
+        this.moreVerticalIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     /**
@@ -129,7 +132,9 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             href="#"
             tabindex="-1"
             [attr.title]="localization.get('columnMenu')">
-            <span class="k-icon k-i-more-vertical"></span>
+            <kendo-icon-wrapper
+                name="more-vertical"
+                [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <ng-container [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
@@ -148,7 +153,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [expanded]="expandedFilter" (expand)="onFilterExpand()">
             </kendo-treelist-columnmenu-filter>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: i5.ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: i6.ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: i7.ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: i6.ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: i7.ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: i8.ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -162,7 +167,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             href="#"
             tabindex="-1"
             [attr.title]="localization.get('columnMenu')">
-            <span class="k-icon k-i-more-vertical"></span>
+            <kendo-icon-wrapper
+                name="more-vertical"
+                [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <ng-container [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"

package/esm2020/column-menu/column-menu.module.mjs

@@ -15,6 +15,7 @@ import { ColumnMenuComponent } from './column-menu.component';
 import { ColumnMenuLockComponent } from './column-menu-lock.component';
 import { FilterMenuModule } from '../filtering/menu/filter-menu.module';
 import { ColumnMenuTemplateDirective } from './column-menu-template.directive';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 const COMPONENTS = [
     ColumnListComponent,
@@ -56,7 +57,7 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuSortComponent,
         ColumnMenuComponent,
         ColumnMenuLockComponent,
-        ColumnMenuTemplateDirective], imports: [CommonModule, FilterMenuModule], exports: [ColumnListComponent,
+        ColumnMenuTemplateDirective], imports: [CommonModule, FilterMenuModule, ButtonModule], exports: [ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,
@@ -66,12 +67,12 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuComponent,
         ColumnMenuLockComponent,
         ColumnMenuTemplateDirective] });
-ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule]] });
+ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS],
-                    imports: [CommonModule, FilterMenuModule],
+                    imports: [CommonModule, FilterMenuModule, ButtonModule],
                     exports: [COMPONENTS]
                 }]
         }] });

package/esm2020/dragdrop/draggable-column.directive.mjs

@@ -23,8 +23,8 @@ import * as i5 from "../navigation/navigation.service";
  */
 const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
-const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-icon-button'));
-const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'));
+const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-svg-i-x'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'), hasClass('k-svg-i-sort-asc-small'), hasClass('k-svg-i-sort-desc-small'));
 const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
 const hideThenShow = (element, cont) => {

package/esm2020/filtering/cell/filter-cell-operators.component.mjs

@@ -6,6 +6,7 @@ import { Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '
 import { Keys } from '@progress/kendo-angular-common';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { filterClearIcon } 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-dropdowns";
@@ -19,6 +20,7 @@ export class FilterCellOperatorsComponent {
     constructor(localization) {
         this.localization = localization;
         this.clearText = 'Clear';
+        this.filterClearIcon = filterClearIcon;
         /**
          * The filter operators that will be displayed.
          */
@@ -109,6 +111,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             kendoTreeListFocusable
             *ngIf="showButton"
             icon="filter-clear"
+            [svgIcon]="filterClearIcon"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
@@ -139,6 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             kendoTreeListFocusable
             *ngIf="showButton"
             icon="filter-clear"
+            [svgIcon]="filterClearIcon"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">

package/esm2020/filtering/menu/filter-menu.component.mjs

@@ -8,11 +8,13 @@ import { ColumnComponent } from '../../columns/column.component';
 import { SinglePopupService } from '../../common/single-popup.service';
 import { filtersByField } from '../base-filter-cell.component';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { filterIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../common/single-popup.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "./filter-menu-container.component";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./filter-menu-container.component";
 /**
  * @hidden
  */
@@ -21,6 +23,7 @@ export class FilterMenuComponent {
         this.filterService = filterService;
         this.popupService = popupService;
         this.localization = localization;
+        this.filterIcon = filterIcon;
         /**
          * @hidden
          */
@@ -45,7 +48,9 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             (click)="toggle(anchor, template)"
             href="#"
             [attr.title]="filterLabel">
-            <span class="k-icon k-i-filter"></span>
+            <kendo-icon-wrapper
+                name="filter"
+                [svgIcon]="filterIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <kendo-treelist-filter-menu-container
@@ -55,7 +60,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-treelist-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -67,7 +72,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (click)="toggle(anchor, template)"
             href="#"
             [attr.title]="filterLabel">
-            <span class="k-icon k-i-filter"></span>
+            <kendo-icon-wrapper
+                name="filter"
+                [svgIcon]="filterIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <kendo-treelist-filter-menu-container

package/esm2020/package-metadata.mjs

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

package/esm2020/pager/pager-next-buttons.component.mjs

@@ -7,6 +7,7 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -17,6 +18,8 @@ import * as i3 from "@progress/kendo-angular-buttons";
 export class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -41,6 +44,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             kendoButton
             type="button"
             icon="caret-alt-right"
+            [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -55,6 +59,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             [tabIndex]="-1"
             icon="caret-alt-to-right"
+            [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -74,6 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             kendoButton
             type="button"
             icon="caret-alt-right"
+            [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -88,6 +94,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type="button"
             [tabIndex]="-1"
             icon="caret-alt-to-right"
+            [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"

package/esm2020/pager/pager-prev-buttons.component.mjs

@@ -7,6 +7,7 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { caretAltLeftIcon, caretAltToLeftIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -17,6 +18,8 @@ import * as i3 from "@progress/kendo-angular-buttons";
 export class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -46,6 +49,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
             icon="caret-alt-to-left"
+            [svgIcon]="caretAltToLeftIcon"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -58,6 +62,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
+            [svgIcon]="caretAltLeftIcon"
             fillMode="flat"
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
@@ -80,6 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
             icon="caret-alt-to-left"
+            [svgIcon]="caretAltToLeftIcon"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -92,6 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
+            [svgIcon]="caretAltLeftIcon"
             fillMode="flat"
             rounded="none"
             [title]="textFor('pagerPreviousPage')"

package/esm2020/rendering/cell.component.mjs

@@ -9,16 +9,18 @@ import { isColumnComponent } from '../columns/column.component';
 import { columnsToRender } from "../columns/column-common";
 import { isNullOrEmptyString, extractFormat, isColumnEditable } from '../utils';
 import { FocusGroup } from '../navigation/focus-group';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../editing/edit.service";
 import * as i2 from "../navigation/focus-group";
-import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@progress/kendo-angular-dateinputs";
-import * as i5 from "@angular/common";
-import * as i6 from "../navigation/focusable.directive";
-import * as i7 from "@angular/forms";
-import * as i8 from "./common/level-items.pipe";
-import * as i9 from "./common/field-accessor.pipe";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-dateinputs";
+import * as i6 from "@angular/common";
+import * as i7 from "../navigation/focusable.directive";
+import * as i8 from "@angular/forms";
+import * as i9 from "./common/level-items.pipe";
+import * as i10 from "./common/field-accessor.pipe";
 /**
  * @hidden
  */
@@ -28,6 +30,8 @@ export class CellComponent {
         this.focusGroup = focusGroup;
         this.isNew = false;
         this.level = 0;
+        this.caretAltDownIcon = caretAltDownIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
         this.cellContext = {};
         this._templateContext = {};
         this._editTemplateContext = {};
@@ -116,9 +120,11 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="column.expandable">
                     <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
-                    <span class="k-icon" *ngIf="hasChildren && expandIcons"
-                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded && !loading, 'k-i-caret-alt-right': !isExpanded && !loading, 'k-i-loading': loading }">
-                    </span>
+                    <kendo-icon-wrapper
+                        *ngIf="hasChildren && expandIcons && !loading"
+                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
+                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                    <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
                     [ngTemplateOutlet]="column.templateRef"
@@ -177,7 +183,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i8.LevelItemsPipe, "valueOf": i9.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i9.LevelItemsPipe, "valueOf": i10.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -187,9 +193,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="column.expandable">
                     <span class="k-icon k-i-none" *ngFor="let item of level | levelItems : hasChildren && expandIcons"></span>
-                    <span class="k-icon" *ngIf="hasChildren && expandIcons"
-                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded && !loading, 'k-i-caret-alt-right': !isExpanded && !loading, 'k-i-loading': loading }">
-                    </span>
+                    <kendo-icon-wrapper
+                        *ngIf="hasChildren && expandIcons && !loading"
+                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
+                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                    <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
                     [ngTemplateOutlet]="column.templateRef"

package/esm2020/rendering/constants.mjs

@@ -17,7 +17,7 @@ export const EMPTY_ICON_CLASS = 'k-i-none';
 /**
  * @hidden
  */
-export const ICON_CLASS = 'k-icon';
+export const ICON_CLASS = 'k-icon k-svg-icon';
 /**
  * @hidden
  */