@progress/kendo-angular-inputs 11.0.0-develop.95 → 11.0.0-develop.97

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

@@ -10,17 +10,20 @@ import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, thro
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import * as i3 from '@progress/kendo-angular-common';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, findFocusableChild, closest as closest$1 } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
+import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, dropletSliderIcon, paletteIcon, dropletSlashIcon, caretAltExpandIcon, xCircleIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import * as i2 from '@progress/kendo-angular-buttons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import * as i1$2 from '@progress/kendo-angular-intl';
+import * as i2$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$3 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
-import * as i2 from '@progress/kendo-angular-buttons';
-import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i3$1 from '@progress/kendo-angular-dialog';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
 import { __awaiter } from 'tslib';
@@ -536,7 +539,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673435233,
+    publishDate: 1673459197,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -992,6 +995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const PRESSED$1 = 'k-pressed';
 /**
  * Represents the [Kendo UI Slider component for Angular]({% slug overview_slider %}).
@@ -1024,13 +1028,29 @@ class SliderComponent extends SliderBase {
          * The component can use either NgModel or the `value` binding but not both of them at the same time.
          */
         this.value = this.min;
+        /**
+         * @hidden
+         */
+        this.arrowUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.arrowLeftIcon = caretAltLeftIcon;
+        /**
+         * @hidden
+         */
+        this.arrowRightIcon = caretAltRightIcon;
         this.focusChangedProgrammatically = false;
         /**
          * @hidden
          */
         this.onWrapClick = (args) => {
             const target = args.target;
-            if (!this.isDisabled && !(isButton(target) || isButton(target.parentNode))) {
+            if (!this.isDisabled && !(target.closest('.k-button'))) {
                 const value = eventValue(args, this.track.nativeElement, this.getProps());
                 this.changeValue(value);
             }
@@ -1365,7 +1385,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         { provide: L10N_PREFIX, useValue: 'kendo.slider' },
         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent) },
         { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) }
-    ], viewQueries: [{ propertyName: "draghandle", first: true, predicate: ["draghandle"], descendants: true, static: true }, { propertyName: "decreaseButton", first: true, predicate: ["decreaseButton"], descendants: true }, { propertyName: "increaseButton", first: true, predicate: ["increaseButton"], descendants: true }], exportAs: ["kendoSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "draghandle", first: true, predicate: ["draghandle"], descendants: true, static: true }, { propertyName: "decreaseButton", first: true, predicate: ["decreaseButton"], descendants: true, read: ElementRef }, { propertyName: "increaseButton", first: true, predicate: ["increaseButton"], descendants: true, read: ElementRef }], exportAs: ["kendoSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSliderLocalizedMessages
             i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
             increment="increment"
@@ -1380,16 +1400,19 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <button *ngIf="showButtons" type="button" #decreaseButton
-                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button 
+                kendoButton
+                #decreaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
+                [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+                class="k-button-decrease"
                 [title]="decrementMessage"
                 [attr.tabindex]="-1"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-left]="!vertical"
-                        [class.k-i-caret-alt-down]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <div class="k-slider-track-wrap">
                 <ul kendoSliderTicks
                     #ticks
@@ -1428,21 +1451,24 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     ></span>
                 </div>
             </div>
-            <button *ngIf="showButtons" type="button" #increaseButton
-                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button
+                kendoButton
+                #increaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
+                [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+                class="k-button-increase"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
                 [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-right]="!vertical"
-                        [class.k-i-caret-alt-up]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
         </div>
-  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+  `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1469,16 +1495,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <button *ngIf="showButtons" type="button" #decreaseButton
-                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button 
+                kendoButton
+                #decreaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
+                [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+                class="k-button-decrease"
                 [title]="decrementMessage"
                 [attr.tabindex]="-1"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-left]="!vertical"
-                        [class.k-i-caret-alt-down]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <div class="k-slider-track-wrap">
                 <ul kendoSliderTicks
                     #ticks
@@ -1517,18 +1546,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     ></span>
                 </div>
             </div>
-            <button *ngIf="showButtons" type="button" #increaseButton
-                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button
+                kendoButton
+                #increaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
+                [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+                class="k-button-increase"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
                 [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-right]="!vertical"
-                        [class.k-i-caret-alt-up]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
         </div>
   `
@@ -1554,10 +1586,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['draghandle', { static: true }]
             }], decreaseButton: [{
                 type: ViewChild,
-                args: ['decreaseButton', { static: false }]
+                args: ['decreaseButton', { read: ElementRef }]
             }], increaseButton: [{
                 type: ViewChild,
-                args: ['increaseButton', { static: false }]
+                args: ['increaseButton', { read: ElementRef }]
             }] } });
 
 /**
@@ -3405,6 +3437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const PARSABLE_OPTIONS = ['min', 'max', 'step', 'decimals'];
 const PARSABLE_DEFAULTS = {
     decimals: null,
@@ -3511,6 +3544,14 @@ class NumericTextBoxComponent {
          */
         this.arrowDirection = ArrowDirection.None;
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.arrowUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
         this.inputValue = '';
         this.minValidateFn = noop$1;
         this.maxValidateFn = noop$1;
@@ -4288,12 +4329,17 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     [attr.aria-hidden]="true"
                     [attr.aria-label]="incrementTitle"
                     [title]="incrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
+                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     tabindex="-1"
                 >
-                    <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
-               </button>
+                    <kendo-icon-wrapper
+                        name="caret-alt-up"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowUpIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
                <button
                     type="button"
                     [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
@@ -4303,11 +4349,16 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     [class.k-active]="arrowDirection === ArrowDirection.Down"
                     class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
-               >
-                    <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
-               </button>
+                >
+                    <kendo-icon-wrapper
+                        name="caret-alt-down"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowDownIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
             </span>
-      `, isInline: true, directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+      `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -4364,12 +4415,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [attr.aria-hidden]="true"
                     [attr.aria-label]="incrementTitle"
                     [title]="incrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
+                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     tabindex="-1"
                 >
-                    <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
-               </button>
+                    <kendo-icon-wrapper
+                        name="caret-alt-up"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowUpIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
                <button
                     type="button"
                     [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
@@ -4379,9 +4435,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [class.k-active]="arrowDirection === ArrowDirection.Down"
                     class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
-               >
-                    <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
-               </button>
+                >
+                    <kendo-icon-wrapper
+                        name="caret-alt-down"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowDownIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
             </span>
       `
                 }]
@@ -5713,11 +5774,11 @@ class SliderModule {
 SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, declarations: [SliderComponent,
         SliderCustomMessagesComponent,
-        LocalizedSliderMessagesDirective], imports: [CommonModule, SlidersCommonModule], exports: [SliderComponent,
+        LocalizedSliderMessagesDirective], imports: [CommonModule, SlidersCommonModule, IconsModule, ButtonModule], exports: [SliderComponent,
         SliderCustomMessagesComponent,
         LabelTemplateDirective,
         LocalizedSliderMessagesDirective] });
-SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, imports: [[CommonModule, SlidersCommonModule]] });
+SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, imports: [[CommonModule, SlidersCommonModule, IconsModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, decorators: [{
             type: NgModule,
             args: [{
@@ -5732,7 +5793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         LabelTemplateDirective,
                         LocalizedSliderMessagesDirective
                     ],
-                    imports: [CommonModule, SlidersCommonModule]
+                    imports: [CommonModule, SlidersCommonModule, IconsModule, ButtonModule]
                 }]
         }] });
 
@@ -5955,9 +6016,9 @@ class NumericTextBoxModule {
 NumericTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 NumericTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, declarations: [LocalizedNumericTextBoxMessagesDirective,
         NumericTextBoxComponent,
-        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule], exports: [NumericTextBoxComponent,
+        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule, IconsModule], exports: [NumericTextBoxComponent,
         NumericTextBoxCustomMessagesComponent] });
-NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule]] });
+NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
@@ -5970,7 +6031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NumericTextBoxComponent,
                         NumericTextBoxCustomMessagesComponent
                     ],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, IconsModule]
                 }]
         }] });
 
@@ -6154,10 +6215,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const FOCUSED$1 = 'k-focus';
 const DEFAULT_SIZE$5 = 'medium';
 const DEFAULT_ROUNDED$4 = 'medium';
 const DEFAULT_FILL_MODE$3 = 'solid';
+const iconsMap$1 = { checkIcon, exclamationCircleIcon, xIcon };
 class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         this.localizationService = localizationService;
@@ -6491,6 +6554,12 @@ class TextBoxComponent {
             this.subscriptions.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     */
+    svgIcon(name) {
+        return iconsMap$1[name];
+    }
     /**
      * Focuses the TextBox.
      *
@@ -6617,25 +6686,49 @@ class TextBoxComponent {
      * @hidden
      */
     get successIconClasses() {
-        return this.successIcon
-            ? `${this.successIcon}`
-            : `k-input-validation-icon k-icon k-i-check`;
+        if (!this.successIcon) {
+            return `check`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customSuccessIconClasses() {
+        if (this.successIcon) {
+            return this.successIcon;
+        }
     }
     /**
      * @hidden
      */
     get errorIconClasses() {
-        return this.errorIcon
-            ? `${this.errorIcon}`
-            : `k-input-validation-icon k-icon k-i-exclamation-circle`;
+        if (!this.errorIcon) {
+            return `exclamation-circle`;
+        }
     }
     /**
      * @hidden
      */
-    get clearButtonClasses() {
-        return this.clearButtonIcon
-            ? this.clearButtonIcon
-            : `k-icon k-i-x`;
+    get customIconClasses() {
+        if (this.errorIcon) {
+            return this.errorIcon;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customClearButtonClasses() {
+        if (this.clearButtonIcon) {
+            return this.clearButtonIcon;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get clearButtonClass() {
+        if (!this.clearButtonIcon) {
+            return 'x';
+        }
     }
     /**
      * @hidden
@@ -6756,17 +6849,36 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [title]="clearTitle()"
             (keydown.enter)="clearValue($event)"
             (keydown.space)="clearValue($event)">
-                <span [ngClass]="clearButtonClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="clearButtonClass"
+                    [customFontClass]="customClearButtonClasses"
+                    [svgIcon]="svgIcon('xIcon')"
+                >
+                </kendo-icon-wrapper>
         </span>
-        <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
-        <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
+        <kendo-icon-wrapper
+            *ngIf="hasErrors"
+            innerCssClass="k-input-validation-icon"
+            [name]="errorIconClasses"
+            [customFontClass]="customIconClasses"
+            [svgIcon]="svgIcon('exclamationCircleIcon')"
+        >
+        </kendo-icon-wrapper>
+        <kendo-icon-wrapper
+            *ngIf="isSuccessful"
+            innerCssClass="k-input-validation-icon"
+            [name]="successIconClasses"
+            [customFontClass]="customSuccessIconClasses"
+            [svgIcon]="svgIcon('checkIcon')"
+        >
+        </kendo-icon-wrapper>
         <span class="k-input-suffix">
             <ng-template
                 *ngIf="suffixTemplate"
                 [ngTemplateOutlet]="suffixTemplate?.templateRef">
             </ng-template>
         </span>
-    `, isInline: true, directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6820,10 +6932,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [title]="clearTitle()"
             (keydown.enter)="clearValue($event)"
             (keydown.space)="clearValue($event)">
-                <span [ngClass]="clearButtonClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="clearButtonClass"
+                    [customFontClass]="customClearButtonClasses"
+                    [svgIcon]="svgIcon('xIcon')"
+                >
+                </kendo-icon-wrapper>
         </span>
-        <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
-        <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
+        <kendo-icon-wrapper
+            *ngIf="hasErrors"
+            innerCssClass="k-input-validation-icon"
+            [name]="errorIconClasses"
+            [customFontClass]="customIconClasses"
+            [svgIcon]="svgIcon('exclamationCircleIcon')"
+        >
+        </kendo-icon-wrapper>
+        <kendo-icon-wrapper
+            *ngIf="isSuccessful"
+            innerCssClass="k-input-validation-icon"
+            [name]="successIconClasses"
+            [customFontClass]="customSuccessIconClasses"
+            [svgIcon]="svgIcon('checkIcon')"
+        >
+        </kendo-icon-wrapper>
         <span class="k-input-suffix">
             <ng-template
                 *ngIf="suffixTemplate"
@@ -7038,14 +7169,14 @@ TextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TextBoxSuffixTemplateDirective,
         TextBoxPrefixTemplateDirective,
         TextBoxCustomMessagesComponent,
-        LocalizedTextBoxMessagesDirective], imports: [CommonModule, EventsModule, SharedModule], exports: [TextBoxDirective,
+        LocalizedTextBoxMessagesDirective], imports: [CommonModule, EventsModule, SharedModule, IconsModule], exports: [TextBoxDirective,
         TextBoxComponent,
         TextBoxSuffixTemplateDirective,
         TextBoxPrefixTemplateDirective,
         EventsModule,
         TextBoxCustomMessagesComponent,
         LocalizedTextBoxMessagesDirective, InputSeparatorComponent, TextAreaDirective] });
-TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxModule, imports: [[CommonModule, EventsModule, SharedModule], EventsModule] });
+TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxModule, imports: [[CommonModule, EventsModule, SharedModule, IconsModule], EventsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxModule, decorators: [{
             type: NgModule,
             args: [{
@@ -7067,7 +7198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         LocalizedTextBoxMessagesDirective,
                         SHARED_DIRECTIVES
                     ],
-                    imports: [CommonModule, EventsModule, SharedModule]
+                    imports: [CommonModule, EventsModule, SharedModule, IconsModule]
                 }]
         }] });
 
@@ -8377,18 +8508,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type: Injectable
         }] });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  */
 class FlatColorPickerHeaderComponent {
-    constructor(localizationService) {
+    constructor(localizationService, renderer) {
         this.localizationService = localizationService;
+        this.renderer = renderer;
         this.hostClasses = true;
         this.innerTabIndex = -1;
         this.viewChange = new EventEmitter();
         this.valuePaneClick = new EventEmitter();
         this.clearButtonClick = new EventEmitter();
         this.tabOut = new EventEmitter();
+        this.dropletSliderIcon = dropletSliderIcon;
+        this.paletteIcon = paletteIcon;
+        this.dropletSlashIcon = dropletSlashIcon;
+    }
+    ngAfterViewInit() {
+        if (this.viewButtonsCollection.length > 0) {
+            this.viewButtonsCollection.forEach((button) => {
+                const buttonElem = button.nativeElement;
+                const isViewActive = buttonElem.getAttribute('aria-pressed') === 'true';
+                if (isViewActive) {
+                    this.renderer.addClass(buttonElem, 'k-selected');
+                }
+            });
+        }
     }
     onViewButtonClick(view) {
         this.activeView = view;
@@ -8398,7 +8545,10 @@ class FlatColorPickerHeaderComponent {
         return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
     }
     getViewButtonIcon(view) {
-        return view === 'gradient' ? 'k-i-color-canvas' : 'k-i-palette';
+        return view === 'gradient' ? 'color-canvas' : 'palette';
+    }
+    getViewButtonsSVGIcon(view) {
+        return view === 'gradient' ? this.dropletSliderIcon : this.paletteIcon;
     }
     getText(text) {
         return this.localizationService.get(text);
@@ -8410,42 +8560,46 @@ class FlatColorPickerHeaderComponent {
         }
     }
 }
-FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <div class="k-coloreditor-header-actions k-hstack">
             <div 
                 *ngIf="viewButtons" 
                 class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views; let i = index;"
-                    #viewButtons
+                <button 
+                    *ngFor="let view of views; let i = index;"
+                    kendoButton
                     type="button"
+                    #viewButtons
+                    fillMode="flat"
                     [tabindex]="innerTabIndex.toString()"
                     (click)="onViewButtonClick(view)"
+                    [icon]="getViewButtonIcon(view)"
+                    [svgIcon]="getViewButtonsSVGIcon(view)"
                     (keydown.shift.tab)="onHeaderTabOut($event, i)"
                     class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
                     [ngClass]="activeView === view ? 'k-selected' : ''">
-                    <span
-                        class="k-button-icon k-icon"
-                        [ngClass]="getViewButtonIcon(view)">
-                    </span>
                 </button>
             </div>
         </div>
         <div class="k-spacer"></div>
         <div class="k-coloreditor-header-actions k-hstack">
             <button
+                kendoButton
+                type="button"
                 [tabindex]="innerTabIndex.toString()"
                 *ngIf="clearButton"
                 #clearButton
-                type="button"
-                class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="k-coloreditor-reset"
                 [attr.aria-label]="getText('clearButton')"
                 [attr.title]="getText('clearButton')"
                 (click)="clearButtonClick.emit()">
-                    <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
             <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                 <span
@@ -8460,7 +8614,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
         </div>
-    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -8471,36 +8625,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <div 
                 *ngIf="viewButtons" 
                 class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views; let i = index;"
-                    #viewButtons
+                <button 
+                    *ngFor="let view of views; let i = index;"
+                    kendoButton
                     type="button"
+                    #viewButtons
+                    fillMode="flat"
                     [tabindex]="innerTabIndex.toString()"
                     (click)="onViewButtonClick(view)"
+                    [icon]="getViewButtonIcon(view)"
+                    [svgIcon]="getViewButtonsSVGIcon(view)"
                     (keydown.shift.tab)="onHeaderTabOut($event, i)"
                     class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
                     [ngClass]="activeView === view ? 'k-selected' : ''">
-                    <span
-                        class="k-button-icon k-icon"
-                        [ngClass]="getViewButtonIcon(view)">
-                    </span>
                 </button>
             </div>
         </div>
         <div class="k-spacer"></div>
         <div class="k-coloreditor-header-actions k-hstack">
             <button
+                kendoButton
+                type="button"
                 [tabindex]="innerTabIndex.toString()"
                 *ngIf="clearButton"
                 #clearButton
-                type="button"
-                class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="k-coloreditor-reset"
                 [attr.aria-label]="getText('clearButton')"
                 [attr.title]="getText('clearButton')"
                 (click)="clearButtonClick.emit()">
-                    <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
             <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                 <span
@@ -8517,7 +8675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-coloreditor-header']
             }, {
@@ -8700,6 +8858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  */
@@ -8741,6 +8900,10 @@ class ColorInputComponent {
          * The rgba inputs values.
          */
         this.rgba = {};
+        /**
+         * @hidden
+         */
+        this.caretAltExpandIcon = caretAltExpandIcon;
         this.subscriptions = new Subscription();
     }
     /**
@@ -8828,17 +8991,21 @@ class ColorInputComponent {
     }
 }
 ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorInputComponent, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blueInput"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorInputComponent, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blueInput"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
-            <button #toggleFormatButton
-                class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+            <button 
+                kendoButton
+                type="button"
+                fillMode="flat"
+                #toggleFormatButton
+                icon="caret-alt-expand"
+                [svgIcon]="caretAltExpandIcon"
+                class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
                 [disabled]="disabled"
                 [tabindex]="tabindex.toString()"
-                type="button"
             >
-                <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
             </button>
         </div>
         <div *ngIf="formatView === 'hex'" class="k-vstack">
@@ -8941,22 +9108,26 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: 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"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: 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"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-colorinput',
                     template: `
         <div class="k-vstack">
-            <button #toggleFormatButton
-                class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+            <button 
+                kendoButton
+                type="button"
+                fillMode="flat"
+                #toggleFormatButton
+                icon="caret-alt-expand"
+                [svgIcon]="caretAltExpandIcon"
+                class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
                 [disabled]="disabled"
                 [tabindex]="tabindex.toString()"
-                type="button"
             >
-                <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
             </button>
         </div>
         <div *ngIf="formatView === 'hex'" class="k-vstack">
@@ -9096,7 +9267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['blueInput']
             }], toggleFormatButton: [{
                 type: ViewChild,
-                args: ['toggleFormatButton', { static: false }]
+                args: ['toggleFormatButton', { static: false, read: ElementRef }]
             }] } });
 
 /**
@@ -9105,6 +9276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class ContrastValidationComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
     }
     get passMessage() {
         return this.localization.get('passContrast');
@@ -9123,14 +9296,14 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         <ng-container *ngIf="value">
             <span class="k-contrast-validation k-text-success" *ngIf="pass">
                 {{passMessage}}
-                <span class="k-icon k-i-check"></span>
+                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
             <span class="k-contrast-validation k-text-error" *ngIf="!pass">
                 {{failMessage}}
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
@@ -9141,11 +9314,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-container *ngIf="value">
             <span class="k-contrast-validation k-text-success" *ngIf="pass">
                 {{passMessage}}
-                <span class="k-icon k-i-check"></span>
+                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
             <span class="k-contrast-validation k-text-error" *ngIf="!pass">
                 {{failMessage}}
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
     `
@@ -9164,6 +9337,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class ContrastComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
     }
     get formatedRatio() {
         return this.contrastRatio.toFixed(2);
@@ -9188,11 +9363,11 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
             <ng-container *ngIf="value">
                 <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
-                    <span class="k-icon k-i-check"></span>
-                    <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
+                    <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                    <kendo-icon-wrapper *ngIf="satisfiesAAACondition" name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 </span>
                 <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                    <span class="k-icon k-i-x"></span>
+                    <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
                 </span>
             </ng-container>
         </div>
@@ -9206,7 +9381,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
@@ -9217,11 +9392,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
             <ng-container *ngIf="value">
                 <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
-                    <span class="k-icon k-i-check"></span>
-                    <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
+                    <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                    <kendo-icon-wrapper *ngIf="satisfiesAAACondition" name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 </span>
                 <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                    <span class="k-icon k-i-x"></span>
+                    <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
                 </span>
             </ng-container>
         </div>
@@ -9341,6 +9516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 let serial$3 = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -9432,6 +9608,10 @@ class ColorGradientComponent {
          * @hidden
          */
         this.internalNavigation = false;
+        /**
+         * @hidden
+         */
+        this.dropletSlashIcon = dropletSlashIcon;
         this._tabindex = 0;
         this.listeners = [];
         this.hueSliderTouched = false;
@@ -9980,18 +10160,23 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-                <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
+
+                <button
+                    kendoButton
                     *ngIf="clearButton"
-                    role="button"
+                    class="k-clear-color"
+                    fillMode="flat"
+                    icon="droplet-slash"
+                    [svgIcon]="dropletSlashIcon"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
                     [tabindex]="innerTabIndex.toString()"
-                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'">
-                    <span class="k-icon k-i-droplet-slash"></span>
-                </span>
+                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
+                >
+                </button>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     [style.height.px]="clearButton ? '140' : null"
@@ -10051,7 +10236,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
@@ -10150,18 +10335,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-                <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
+
+                <button
+                    kendoButton
                     *ngIf="clearButton"
-                    role="button"
+                    class="k-clear-color"
+                    fillMode="flat"
+                    icon="droplet-slash"
+                    [svgIcon]="dropletSlashIcon"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
                     [tabindex]="innerTabIndex.toString()"
-                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'">
-                    <span class="k-icon k-i-droplet-slash"></span>
-                </span>
+                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
+                >
+                </button>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     [style.height.px]="clearButton ? '140' : null"
@@ -11796,6 +11986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['footer']
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 const DEFAULT_SIZE$3 = 'medium';
 const DEFAULT_ROUNDED$2 = 'medium';
@@ -11921,6 +12112,10 @@ class ColorPickerComponent {
          * Indicates whether the ColorPicker wrapper is focused.
          */
         this.isFocused = false;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
@@ -12003,6 +12198,19 @@ class ColorPickerComponent {
     get gradientSettings() {
         return this._gradientSettings;
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
@@ -12080,13 +12288,24 @@ class ColorPickerComponent {
     /**
      * @hidden
      */
-    get iconStyles() {
+    get customIconStyles() {
         if (this.iconClass) {
-            return this.iconClass;
+            let parsedIconClass = '';
+            parseCSSClassNames(this.iconClass).forEach(iconClass => {
+                parsedIconClass += iconClass + ' ';
+            });
+            return parsedIconClass.slice(0, -1);
         }
-        if (this.icon) {
-            return `k-icon k-i-${this.icon}`;
+        return '';
+    }
+    /**
+     * @hidden
+     */
+    get iconStyles() {
+        if (this.icon && !this.iconClass) {
+            return `${this.icon}`;
         }
+        return '';
     }
     ngOnInit() {
         const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
@@ -12464,7 +12683,7 @@ class ColorPickerComponent {
     }
 }
 ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [{
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [{
             multi: true,
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ColorPickerComponent)
@@ -12535,18 +12754,30 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <span #activeColor class="k-input-inner">
             <span
                 class="k-value-icon k-color-preview"
-                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
-                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                [ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles, 'k-no-color': !value}"
+            >
+                <kendo-icon-wrapper
+                    *ngIf="iconClass || icon"
+                    [name]="iconStyles"
+                    innerCssClass="k-color-preview-icon"
+                    [customFontClass]="customIconStyles"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
                 <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
+
         </span>
         <button
+            kendoButton
             tabindex="-1"
             type="button"
             role="none"
+            icon="caret-alt-down"
+            [svgIcon]="arrowDownIcon"
             aria-hidden="true"
-            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
-                <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            class="k-input-button"
+        >
         </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
@@ -12569,7 +12800,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12646,18 +12877,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <span #activeColor class="k-input-inner">
             <span
                 class="k-value-icon k-color-preview"
-                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
-                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                [ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles, 'k-no-color': !value}"
+            >
+                <kendo-icon-wrapper
+                    *ngIf="iconClass || icon"
+                    [name]="iconStyles"
+                    innerCssClass="k-color-preview-icon"
+                    [customFontClass]="customIconStyles"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
                 <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
+
         </span>
         <button
+            kendoButton
             tabindex="-1"
             type="button"
             role="none"
+            icon="caret-alt-down"
+            [svgIcon]="arrowDownIcon"
             aria-hidden="true"
-            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
-                <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            class="k-input-button"
+        >
         </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
@@ -12745,6 +12988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], clearButton: [{
                 type: Input
             }], tabindex: [{
@@ -12889,7 +13134,9 @@ ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         NumericTextBoxModule,
         CommonModule,
         PopupModule,
-        DraggableModule], exports: [ColorPickerComponent,
+        DraggableModule,
+        ButtonModule,
+        IconsModule], exports: [ColorPickerComponent,
         ColorPaletteComponent,
         ColorGradientComponent,
         FlatColorPickerComponent,
@@ -12900,7 +13147,9 @@ ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             NumericTextBoxModule,
             CommonModule,
             PopupModule,
-            DraggableModule
+            DraggableModule,
+            ButtonModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
@@ -12915,7 +13164,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NumericTextBoxModule,
                         CommonModule,
                         PopupModule,
-                        DraggableModule
+                        DraggableModule,
+                        ButtonModule,
+                        IconsModule
                     ]
                 }]
         }] });
@@ -13707,6 +13958,7 @@ const DEFAULT_POPUP_SCALE = 3;
 const DEFAULT_EXPORT_SCALE = 2;
 const DEFAULT_COLOR = '#000000';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
+const iconsMap = { xIcon, hyperlinkOpenIcon };
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
@@ -13867,6 +14119,12 @@ class SignatureComponent {
     get value() {
         return this._value;
     }
+    /**
+     * @hidden
+     */
+    svgIcon(name) {
+        return iconsMap[name];
+    }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
@@ -13952,6 +14210,9 @@ class SignatureComponent {
     get showClear() {
         return !(this.isEmpty || this.isDrawing || this.readonly || this.disabled);
     }
+    /**
+     * @hidden
+     */
     get focused() {
         return this.isFocused;
     }
@@ -14280,6 +14541,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMaximize()"
@@ -14291,6 +14553,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 kendoButton
                 class="k-signature-action k-signature-minimize k-rotate-180"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -14315,6 +14578,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 kendoButton
                 class="k-signature-action k-signature-clear"
                 icon="close"
+                [svgIcon]="svgIcon('xIcon')"
                 fillMode="flat"
                 [size]="size"
                 [attr.aria-label]="clearTitle"
@@ -14381,6 +14645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMaximize()"
@@ -14392,6 +14657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-minimize k-rotate-180"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -14416,6 +14682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-clear"
                 icon="close"
+                [svgIcon]="svgIcon('xIcon')"
                 fillMode="flat"
                 [size]="size"
                 [attr.aria-label]="clearTitle"
@@ -14572,12 +14839,14 @@ SignatureModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         SignatureCustomMessagesComponent,
         LocalizedSignatureMessagesDirective], imports: [ButtonModule,
         CommonModule,
-        DialogsModule], exports: [SignatureComponent,
+        DialogsModule,
+        IconsModule], exports: [SignatureComponent,
         SignatureCustomMessagesComponent] });
 SignatureModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureModule, imports: [[
             ButtonModule,
             CommonModule,
-            DialogsModule
+            DialogsModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureModule, decorators: [{
             type: NgModule,
@@ -14594,7 +14863,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         ButtonModule,
                         CommonModule,
-                        DialogsModule
+                        DialogsModule,
+                        IconsModule
                     ]
                 }]
         }] });