@progress/kendo-vue-inputs 3.7.4-dev.202212300853 → 3.7.4-dev.202301120847

package/dist/es/colors/ColorContrastLabels.js

@@ -4,6 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
 import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages/main';
 import { getContrastFromTwoRGBAs } from './utils/color-parser';
 import { Icon } from '@progress/kendo-vue-common';
@@ -51,17 +52,21 @@ var ColorContrastLabelsVue2 = {
     }, [passMessage, " ", h(Icon, {
       name: "check",
       attrs: this.v3 ? undefined : {
-        name: "check"
-      }
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     })]);
     var error = h("span", {
       key: 2,
       "class": "k-contrast-validation k-text-error"
     }, [failMessage, " ", h(Icon, {
-      name: "close",
+      name: "x",
       attrs: this.v3 ? undefined : {
-        name: "close"
-      }
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })]);
     return h("div", {
       "class": "k-vbox k-colorgradient-color-contrast"
@@ -74,20 +79,26 @@ var ColorContrastLabelsVue2 = {
     }, [h(Icon, {
       name: "check",
       attrs: this.v3 ? undefined : {
-        name: "check"
-      }
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     }), aaaPass && h(Icon, {
       name: "check",
       attrs: this.v3 ? undefined : {
-        name: "check"
-      }
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     })]) : h("span", {
       "class": "k-contrast-validation k-text-error"
     }, [h(Icon, {
-      name: "close",
+      name: "x",
       attrs: this.v3 ? undefined : {
-        name: "close"
-      }
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })])]), h("div", [h("span", [aaText]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
   }
 };

package/dist/es/colors/ColorInput.js

@@ -22,6 +22,7 @@ import { Label } from '@progress/kendo-vue-labels';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientRLabel, colorGradientGLabel, colorGradientBLabel, colorGradientALabel, colorGradientInputColorButton } from '../messages/main';
 import { guid, Keys } from '@progress/kendo-vue-common';
+import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -99,12 +100,14 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'caret-alt-expand'
+        icon: 'caret-alt-expand',
+        svgIcon: caretAltExpandIcon
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
       icon: 'caret-alt-expand',
+      svgIcon: caretAltExpandIcon,
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/es/colors/ColorPicker.js

@@ -25,6 +25,7 @@ import { FlatColorPicker } from './FlatColorPicker';
 import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, colorPickerDropdownButtonAriaLabel } from '../messages/main';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -318,6 +319,7 @@ var ColorPickerVue2 = {
         tabindex: -1,
         rounded: null,
         icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon,
         "aria-label": colorPickerLabelMessage
       },
       tabindex: -1,
@@ -331,6 +333,7 @@ var ColorPickerVue2 = {
       rounded: null,
       "class": "k-input-button",
       icon: 'caret-alt-down',
+      svgIcon: caretAltDownIcon,
       "aria-label": colorPickerLabelMessage
     }),
     // @ts-ignore function children

package/dist/es/colors/FlatColorPicker.js

@@ -15,6 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
 import { classNames, validatePackage, getTabIndex, setRef, focusContainer, focusFirstFocusableChild, Keys, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
 import { ColorPalette } from './ColorPalette';
@@ -251,16 +252,20 @@ var FlatColorPickerVue2 = {
         }
       }, _this2.v3 ? function () {
         return [h(Icon, {
-          name: "color-canvas",
+          name: "droplet-slider",
           attrs: _this2.v3 ? undefined : {
-            name: "color-canvas"
-          }
+            name: "droplet-slider",
+            icon: dropletSliderIcon
+          },
+          icon: dropletSliderIcon
         })];
       } : [h(Icon, {
-        name: "color-canvas",
+        name: "droplet-slider",
         attrs: _this2.v3 ? undefined : {
-          name: "color-canvas"
-        }
+          name: "droplet-slider",
+          icon: dropletSliderIcon
+        },
+        icon: dropletSliderIcon
       })]),
       // @ts-ignore  function children
       h(Button, {
@@ -292,14 +297,18 @@ var FlatColorPickerVue2 = {
         return [h(Icon, {
           name: "palette",
           attrs: _this2.v3 ? undefined : {
-            name: "palette"
-          }
+            name: "palette",
+            icon: paletteIcon
+          },
+          icon: paletteIcon
         })];
       } : [h(Icon, {
         name: "palette",
         attrs: _this2.v3 ? undefined : {
-          name: "palette"
-        }
+          name: "palette",
+          icon: paletteIcon
+        },
+        icon: paletteIcon
       })])];
     } : [h(Button, {
       tabIndex: _this2.computedTabIndex,
@@ -328,16 +337,20 @@ var FlatColorPickerVue2 = {
       }
     }, _this2.v3 ? function () {
       return [h(Icon, {
-        name: "color-canvas",
+        name: "droplet-slider",
         attrs: _this2.v3 ? undefined : {
-          name: "color-canvas"
-        }
+          name: "droplet-slider",
+          icon: dropletSliderIcon
+        },
+        icon: dropletSliderIcon
       })];
     } : [h(Icon, {
-      name: "color-canvas",
+      name: "droplet-slider",
       attrs: _this2.v3 ? undefined : {
-        name: "color-canvas"
-      }
+        name: "droplet-slider",
+        icon: dropletSliderIcon
+      },
+      icon: dropletSliderIcon
     })]), h(Button, {
       tabIndex: _this2.computedTabIndex,
       attrs: _this2.v3 ? undefined : {
@@ -367,14 +380,18 @@ var FlatColorPickerVue2 = {
       return [h(Icon, {
         name: "palette",
         attrs: _this2.v3 ? undefined : {
-          name: "palette"
-        }
+          name: "palette",
+          icon: paletteIcon
+        },
+        icon: paletteIcon
       })];
     } : [h(Icon, {
       name: "palette",
       attrs: _this2.v3 ? undefined : {
-        name: "palette"
-      }
+        name: "palette",
+        icon: paletteIcon
+      },
+      icon: paletteIcon
     })])])]), h("div", {
       "class": "k-spacer"
     }), h("div", {
@@ -402,14 +419,18 @@ var FlatColorPickerVue2 = {
       return [h(Icon, {
         name: "droplet-slash",
         attrs: _this2.v3 ? undefined : {
-          name: "droplet-slash"
-        }
+          name: "droplet-slash",
+          icon: dropletSlashIcon
+        },
+        icon: dropletSlashIcon
       })];
     } : [h(Icon, {
       name: "droplet-slash",
       attrs: _this2.v3 ? undefined : {
-        name: "droplet-slash"
-      }
+        name: "droplet-slash",
+        icon: dropletSlashIcon
+      },
+      icon: dropletSlashIcon
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {

package/dist/es/input/Input.js

@@ -19,6 +19,7 @@ var ref = allVue.ref;
 import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -243,14 +244,18 @@ var InputVue2 = {
     }, [inputSuffix]), showValidationIcon && isValid && h(Icon, {
       name: 'check',
       attrs: this.v3 ? undefined : {
-        name: 'check'
+        name: 'check',
+        icon: checkIcon
       },
+      icon: checkIcon,
       "class": "k-input-validation-icon"
     }), showValidationIcon && !isValid && h(Icon, {
-      name: 'warning',
+      name: 'exclamation-circle',
       attrs: this.v3 ? undefined : {
-        name: 'warning'
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
       },
+      icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
     }), showLoadingIcon && h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
@@ -263,8 +268,10 @@ var InputVue2 = {
     }, [h(Icon, {
       name: 'x',
       attrs: this.v3 ? undefined : {
-        name: 'x'
-      }
+        name: 'x',
+        icon: xIcon
+      },
+      icon: xIcon
     })])]);
     return label ?
     // @ts-ignore function children

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -8,6 +8,7 @@ import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';
 import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, setRef, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
+import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -466,14 +467,18 @@ var MaskedTextBoxVue2 = {
     }, [inputSuffix]), showValidationIcon && isValid && h(Icon, {
       name: 'check',
       attrs: this.v3 ? undefined : {
-        name: 'check'
+        name: 'check',
+        icon: checkIcon
       },
+      icon: checkIcon,
       "class": "k-input-validation-icon"
     }), showValidationIcon && !isValid && h(Icon, {
-      name: 'warning',
+      name: 'exclamation-circle',
       attrs: this.v3 ? undefined : {
-        name: 'warning'
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
       },
+      icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
     }), showLoadingIcon && h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
@@ -486,8 +491,10 @@ var MaskedTextBoxVue2 = {
     }, [h(Icon, {
       name: 'x',
       attrs: this.v3 ? undefined : {
-        name: 'x'
-      }
+        name: 'x',
+        icon: xIcon
+      },
+      icon: xIcon
     })])]);
     return this.$props.label ? h("span", {
       "class": this.spanClassNames,

package/dist/es/numerictextbox/NumericTextBox.js

@@ -12,6 +12,7 @@ import { Button as KButton } from '@progress/kendo-vue-buttons';
 import { messages, numericIncreaseValue, numericDecreaseValue } from '../messages/main';
 import { formatValue, sanitizeNumber, rangeValue, increaseValue, decreaseValue, getStateOrPropsValue } from './utils/main';
 import { packageMetadata } from '../package-metadata';
+import { caretAltDownIcon, caretAltUpIcon, checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * @hidden
@@ -571,14 +572,18 @@ var NumericTextBoxVue2 = {
     }, [inputSuffix]), showValidationIcon && isValid && h(Icon, {
       name: 'check',
       attrs: this.v3 ? undefined : {
-        name: 'check'
+        name: 'check',
+        icon: checkIcon
       },
+      icon: checkIcon,
       "class": "k-input-validation-icon"
     }), showValidationIcon && !isValid && h(Icon, {
-      name: 'warning',
+      name: 'exclamation-circle',
       attrs: this.v3 ? undefined : {
-        name: 'warning'
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
       },
+      icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
     }), showLoadingIcon && h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
@@ -591,8 +596,10 @@ var NumericTextBoxVue2 = {
     }, [h(Icon, {
       name: 'x',
       attrs: this.v3 ? undefined : {
-        name: 'x'
-      }
+        name: 'x',
+        icon: xIcon
+      },
+      icon: xIcon
     })]), defaultSlot, this.$props.spinners && h("span", {
       "class": "k-input-spinner k-spin-button",
       onMousedown: this.spinnersWrapperMouseDown,
@@ -607,12 +614,14 @@ var NumericTextBoxVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'caret-alt-up',
+        svgIcon: caretAltUpIcon,
         rounded: null,
         "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
         title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])
       },
       tabIndex: -1,
       icon: 'caret-alt-up',
+      svgIcon: caretAltUpIcon,
       "class": "k-spinner-increase",
       rounded: null,
       "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]),
@@ -629,6 +638,7 @@ var NumericTextBoxVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon,
         rounded: null,
         "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
         title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])
@@ -636,6 +646,7 @@ var NumericTextBoxVue2 = {
       tabIndex: -1,
       "class": "k-spinner-decrease",
       icon: 'caret-alt-down',
+      svgIcon: caretAltDownIcon,
       rounded: null,
       "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),
       title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]),

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1672389639,
+    publishDate: 1673512136,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/signature/Signature.js

@@ -141,6 +141,7 @@ import { messages, signatureClear, signatureMaximize, signatureMinimize } from '
 import { packageMetadata } from '../package-metadata';
 import { SignatureCanvas } from './SignatureCanvas';
 import { hasParent } from './utils';
+import { hyperlinkOpenIcon, xIcon } from '@progress/kendo-svg-icons';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 84;
 var DEFAULT_POPUP_SCALE = 3;
@@ -355,12 +356,14 @@ var SignatureVue2 = {
       icon: 'hyperlink-open',
       attrs: this.v3 ? undefined : {
         icon: 'hyperlink-open',
+        svgIcon: hyperlinkOpenIcon,
         shape: null,
         fillMode: 'flat',
         size: this.$props.size,
         "aria-label": maximizeTitle,
         title: maximizeTitle
       },
+      svgIcon: hyperlinkOpenIcon,
       shape: null,
       fillMode: 'flat',
       size: this.$props.size,
@@ -378,12 +381,14 @@ var SignatureVue2 = {
       icon: 'hyperlink-open',
       attrs: this.v3 ? undefined : {
         icon: 'hyperlink-open',
+        svgIcon: hyperlinkOpenIcon,
         shape: null,
         fillMode: 'flat',
         size: this.$props.size,
         "aria-label": minimizeTitle,
         title: minimizeTitle
       },
+      svgIcon: hyperlinkOpenIcon,
       shape: null,
       fillMode: 'flat',
       size: this.$props.size,
@@ -407,15 +412,17 @@ var SignatureVue2 = {
     // @ts-ignore
     h(Button, {
       "class": 'k-signature-action k-signature-clear',
-      icon: 'close',
+      icon: 'x',
       attrs: this.v3 ? undefined : {
-        icon: 'close',
+        icon: 'x',
+        svgIcon: xIcon,
         shape: null,
         fillMode: 'flat',
         size: this.$props.size,
         "aria-label": clearTitle,
         title: clearTitle
       },
+      svgIcon: xIcon,
       shape: null,
       fillMode: 'flat',
       size: this.$props.size,

package/dist/es/slider/Slider.js

@@ -11,6 +11,7 @@ import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from '../messages/main';
 import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
 import { packageMetadata } from '../package-metadata';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -169,11 +170,13 @@ var SliderVue2 = {
         type: "button",
         tabindex: -1,
         icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
+        svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
         rounded: 'full',
         title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
       },
       tabindex: -1,
       icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
+      svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
       style: {
         position: 'relative'
       },
@@ -286,11 +289,13 @@ var SliderVue2 = {
         type: "button",
         tabindex: -1,
         icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
+        svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
         rounded: 'full',
         title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
       },
       tabindex: -1,
       icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
+      svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
       rounded: 'full',
       style: {
         position: 'relative'

package/dist/es/textarea/TextArea.js

@@ -19,6 +19,7 @@ import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefi
 // useDir,
 } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
+import { exclamationCircleIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -304,10 +305,12 @@ var TextAreaVue2 = {
     })]), showValidationIcon && !this.isValid && h("span", {
       "class": this.suffixIconWrapClass
     }, [h(Icon, {
-      name: 'warning',
+      name: 'exclamation-circle',
       attrs: this.v3 ? undefined : {
-        name: 'warning'
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
       },
+      icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
     })]), showLoadingIcon && h("span", {
       "class": this.suffixIconWrapClass

package/dist/esm/colors/ColorContrastLabels.js

@@ -4,6 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
 import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages/main.js';
 import { getContrastFromTwoRGBAs } from './utils/color-parser.js';
 import { Icon } from '@progress/kendo-vue-common';
@@ -51,17 +52,21 @@ var ColorContrastLabelsVue2 = {
     }, [passMessage, " ", h(Icon, {
       name: "check",
       attrs: this.v3 ? undefined : {
-        name: "check"
-      }
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     })]);
     var error = h("span", {
       key: 2,
       "class": "k-contrast-validation k-text-error"
     }, [failMessage, " ", h(Icon, {
-      name: "close",
+      name: "x",
       attrs: this.v3 ? undefined : {
-        name: "close"
-      }
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })]);
     return h("div", {
       "class": "k-vbox k-colorgradient-color-contrast"
@@ -74,20 +79,26 @@ var ColorContrastLabelsVue2 = {
     }, [h(Icon, {
       name: "check",
       attrs: this.v3 ? undefined : {
-        name: "check"
-      }
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     }), aaaPass && h(Icon, {
       name: "check",
       attrs: this.v3 ? undefined : {
-        name: "check"
-      }
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     })]) : h("span", {
       "class": "k-contrast-validation k-text-error"
     }, [h(Icon, {
-      name: "close",
+      name: "x",
       attrs: this.v3 ? undefined : {
-        name: "close"
-      }
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })])]), h("div", [h("span", [aaText]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
   }
 };

package/dist/esm/colors/ColorInput.js

@@ -22,6 +22,7 @@ import { Label } from '@progress/kendo-vue-labels';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientRLabel, colorGradientGLabel, colorGradientBLabel, colorGradientALabel, colorGradientInputColorButton } from '../messages/main.js';
 import { guid, Keys } from '@progress/kendo-vue-common';
+import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -99,12 +100,14 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'caret-alt-expand'
+        icon: 'caret-alt-expand',
+        svgIcon: caretAltExpandIcon
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
       icon: 'caret-alt-expand',
+      svgIcon: caretAltExpandIcon,
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/esm/colors/ColorPicker.js

@@ -25,6 +25,7 @@ import { FlatColorPicker } from './FlatColorPicker.js';
 import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, colorPickerDropdownButtonAriaLabel } from '../messages/main.js';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -318,6 +319,7 @@ var ColorPickerVue2 = {
         tabindex: -1,
         rounded: null,
         icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon,
         "aria-label": colorPickerLabelMessage
       },
       tabindex: -1,
@@ -331,6 +333,7 @@ var ColorPickerVue2 = {
       rounded: null,
       "class": "k-input-button",
       icon: 'caret-alt-down',
+      svgIcon: caretAltDownIcon,
       "aria-label": colorPickerLabelMessage
     }),
     // @ts-ignore function children