@progress/kendo-vue-dropdowns 3.7.4-dev.202301120847 → 3.7.4-dev.202301151601

package/dist/es/AutoComplete/AutoComplete.js

@@ -22,7 +22,7 @@ import { List } from './../common/List';
 import DropDownBase from '../common/DropDownBase';
 import { ClearButton } from '../common/ClearButton';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils';
-import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
+import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
@@ -661,27 +661,6 @@ var AutoCompleteVue2 = {
         }, [footer])])
       );
     };
-    var renderClearButton = function renderClearButton(cbutton) {
-      if (cbutton) {
-        // @ts-ignore  function children
-        return h(ClearButton, {
-          onClearclick: this.clearButtonClick,
-          on: this.v3 ? undefined : {
-            "clearclick": this.clearButtonClick
-          },
-          key: "clearbutton"
-        });
-      }
-      return h("span");
-    };
-    var renderLoading = function renderLoading(cloading) {
-      if (cloading) {
-        return h(Icon, {
-          "class": "k-input-loading-icon"
-        });
-      }
-      return h("span");
-    };
     var autoComplete = h("span", {
       "class": classNames('k-autocomplete k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-focus'] = focused && !disabled, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a)),
       ref: setRef(this, 'kendoAnchor', this.anchor),
@@ -692,7 +671,16 @@ var AutoCompleteVue2 = {
       attrs: this.v3 ? undefined : {
         dir: dir
       }
-    }, [renderSearchBar.call(this, value || '', id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
+    }, [renderSearchBar.call(this, value || '', id), clearButton && !loading &&
+    // @ts-ignore  function children
+    h(ClearButton, {
+      onClearclick: this.clearButtonClick,
+      on: this.v3 ? undefined : {
+        "clearclick": this.clearButtonClick
+      }
+    }), h("span", {
+      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,

package/dist/es/ComboBox/ComboBox.js

@@ -685,6 +685,8 @@ var ComboBoxVue2 = {
       className = _b.className,
       style = _b.style,
       loading = _b.loading,
+      icon = _b.icon,
+      svgIcon = _b.svgIcon,
       iconClassName = _b.iconClassName,
       virtual = _b.virtual,
       size = _b.size,
@@ -949,8 +951,8 @@ var ComboBoxVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        icon: 'caret-alt-down',
-        svgIcon: caretAltDownIcon,
+        icon: icon || 'caret-alt-down',
+        svgIcon: svgIcon || caretAltDownIcon,
         iconClass: iconClassName
       },
       tabIndex: -1,
@@ -959,8 +961,8 @@ var ComboBoxVue2 = {
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      icon: 'caret-alt-down',
-      svgIcon: caretAltDownIcon,
+      icon: icon || 'caret-alt-down',
+      svgIcon: svgIcon || caretAltDownIcon,
       iconClass: iconClassName,
       onClick: this.toggleBtnClick,
       on: this.v3 ? undefined : {

package/dist/es/ComboBox/ComboBoxProps.d.ts

@@ -1,6 +1,7 @@
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { FormComponentProps } from '@progress/kendo-vue-common';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the object of the `FilterChange` ComboBox event.
  */
@@ -56,6 +57,14 @@ export interface ComboBoxProps extends FormComponentProps {
      * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
      */
     defaultValue?: any;
+    /**
+     * Defines the name for an existing arrow icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
      */

package/dist/es/DropDownList/DropDownList.js

@@ -91,6 +91,8 @@ var DropDownListVue2 = {
       type: Boolean,
       default: true
     },
+    icon: String,
+    svgIcon: Object,
     iconClassName: String,
     defaultItem: [Object, String],
     valueRender: [String, Function, Object],
@@ -716,6 +718,8 @@ var DropDownListVue2 = {
       disabled = _d.disabled,
       tabIndex = _d.tabIndex,
       loading = _d.loading,
+      icon = _d.icon,
+      svgIcon = _d.svgIcon,
       iconClassName = _d.iconClassName;
     var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
     var focused = this.currentFocused;
@@ -1018,8 +1022,8 @@ var DropDownListVue2 = {
         fillMode: fillMode,
         rounded: null,
         ariaLabel: ariaLabelSelectButton,
-        icon: 'caret-alt-down',
-        svgIcon: caretAltDownIcon,
+        icon: icon || 'caret-alt-down',
+        svgIcon: svgIcon || caretAltDownIcon,
         iconClass: iconClassName,
         "aria-hidden": true
       },
@@ -1029,8 +1033,8 @@ var DropDownListVue2 = {
       rounded: null,
       ariaLabel: ariaLabelSelectButton,
       "class": 'k-input-button',
-      icon: 'caret-alt-down',
-      svgIcon: caretAltDownIcon,
+      icon: icon || 'caret-alt-down',
+      svgIcon: svgIcon || caretAltDownIcon,
       iconClass: iconClassName,
       "aria-hidden": true
     }), dummySelect.call(this, value), renderListContainer.call(this)]);

package/dist/es/DropDownList/DropDownListProps.d.ts

@@ -1,6 +1,7 @@
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { FormComponentProps } from '@progress/kendo-vue-common';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the object of the `filterChange` DropDownList event.
  */
@@ -110,6 +111,14 @@ export interface DropDownListProps extends FormComponentProps {
      * Sets additional classes to the DropDownList.
      */
     className?: string;
+    /**
+     * Defines the name for an existing arrow icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
      */

package/dist/es/MultiSelect/MultiSelect.js

@@ -846,31 +846,6 @@ var MultiSelectVue2 = {
     }
     this.setItems(tagsToRender, this._tags);
     var isValid = !this.$props.validityStyles || this.validity().valid;
-    var renderClearButton = function renderClearButton(cbutton) {
-      if (cbutton) {
-        // @ts-ignore  function children
-        return h(ClearButton, {
-          onClearclick: this.clearButtonClick,
-          on: this.v3 ? undefined : {
-            "clearclick": this.clearButtonClick
-          },
-          key: "clearbutton"
-        });
-      }
-      return h("span");
-    };
-    var renderLoading = function renderLoading(cloading) {
-      if (cloading) {
-        return h(Icon, {
-          name: 'loading',
-          attrs: this.v3 ? undefined : {
-            name: 'loading'
-          },
-          "class": "k-input-loading-icon"
-        });
-      }
-      return h("span");
-    };
     var renderSearchBar = function renderSearchBar(searchId) {
       var _this = this;
       var activedescendant = this.activedescendant;
@@ -1132,7 +1107,16 @@ var MultiSelectVue2 = {
       }) : undefined
     }, this.v3 ? function () {
       return [renderSearchBar.call(_this4, id)];
-    } : [renderSearchBar.call(_this4, id)]), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
+    } : [renderSearchBar.call(_this4, id)]), clearButton && !loading &&
+    // @ts-ignore  function children
+    h(ClearButton, {
+      onClearclick: this.clearButtonClick,
+      on: this.v3 ? undefined : {
+        "clearclick": this.clearButtonClick
+      }
+    }), h("span", {
+      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1673512056,
+    publishDate: 1673797537,
     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/esm/AutoComplete/AutoComplete.js

@@ -22,7 +22,7 @@ import { List } from './../common/List.js';
 import DropDownBase from '../common/DropDownBase.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils.js';
-import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
+import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
@@ -661,27 +661,6 @@ var AutoCompleteVue2 = {
         }, [footer])])
       );
     };
-    var renderClearButton = function renderClearButton(cbutton) {
-      if (cbutton) {
-        // @ts-ignore  function children
-        return h(ClearButton, {
-          onClearclick: this.clearButtonClick,
-          on: this.v3 ? undefined : {
-            "clearclick": this.clearButtonClick
-          },
-          key: "clearbutton"
-        });
-      }
-      return h("span");
-    };
-    var renderLoading = function renderLoading(cloading) {
-      if (cloading) {
-        return h(Icon, {
-          "class": "k-input-loading-icon"
-        });
-      }
-      return h("span");
-    };
     var autoComplete = h("span", {
       "class": classNames('k-autocomplete k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-focus'] = focused && !disabled, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a)),
       ref: setRef(this, 'kendoAnchor', this.anchor),
@@ -692,7 +671,16 @@ var AutoCompleteVue2 = {
       attrs: this.v3 ? undefined : {
         dir: dir
       }
-    }, [renderSearchBar.call(this, value || '', id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
+    }, [renderSearchBar.call(this, value || '', id), clearButton && !loading &&
+    // @ts-ignore  function children
+    h(ClearButton, {
+      onClearclick: this.clearButtonClick,
+      on: this.v3 ? undefined : {
+        "clearclick": this.clearButtonClick
+      }
+    }), h("span", {
+      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,

package/dist/esm/ComboBox/ComboBox.js

@@ -685,6 +685,8 @@ var ComboBoxVue2 = {
       className = _b.className,
       style = _b.style,
       loading = _b.loading,
+      icon = _b.icon,
+      svgIcon = _b.svgIcon,
       iconClassName = _b.iconClassName,
       virtual = _b.virtual,
       size = _b.size,
@@ -949,8 +951,8 @@ var ComboBoxVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        icon: 'caret-alt-down',
-        svgIcon: caretAltDownIcon,
+        icon: icon || 'caret-alt-down',
+        svgIcon: svgIcon || caretAltDownIcon,
         iconClass: iconClassName
       },
       tabIndex: -1,
@@ -959,8 +961,8 @@ var ComboBoxVue2 = {
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      icon: 'caret-alt-down',
-      svgIcon: caretAltDownIcon,
+      icon: icon || 'caret-alt-down',
+      svgIcon: svgIcon || caretAltDownIcon,
       iconClass: iconClassName,
       onClick: this.toggleBtnClick,
       on: this.v3 ? undefined : {

package/dist/esm/ComboBox/ComboBoxProps.d.ts

@@ -1,6 +1,7 @@
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { FormComponentProps } from '@progress/kendo-vue-common';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the object of the `FilterChange` ComboBox event.
  */
@@ -56,6 +57,14 @@ export interface ComboBoxProps extends FormComponentProps {
      * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
      */
     defaultValue?: any;
+    /**
+     * Defines the name for an existing arrow icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
      */

package/dist/esm/DropDownList/DropDownList.js

@@ -91,6 +91,8 @@ var DropDownListVue2 = {
       type: Boolean,
       default: true
     },
+    icon: String,
+    svgIcon: Object,
     iconClassName: String,
     defaultItem: [Object, String],
     valueRender: [String, Function, Object],
@@ -716,6 +718,8 @@ var DropDownListVue2 = {
       disabled = _d.disabled,
       tabIndex = _d.tabIndex,
       loading = _d.loading,
+      icon = _d.icon,
+      svgIcon = _d.svgIcon,
       iconClassName = _d.iconClassName;
     var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
     var focused = this.currentFocused;
@@ -1018,8 +1022,8 @@ var DropDownListVue2 = {
         fillMode: fillMode,
         rounded: null,
         ariaLabel: ariaLabelSelectButton,
-        icon: 'caret-alt-down',
-        svgIcon: caretAltDownIcon,
+        icon: icon || 'caret-alt-down',
+        svgIcon: svgIcon || caretAltDownIcon,
         iconClass: iconClassName,
         "aria-hidden": true
       },
@@ -1029,8 +1033,8 @@ var DropDownListVue2 = {
       rounded: null,
       ariaLabel: ariaLabelSelectButton,
       "class": 'k-input-button',
-      icon: 'caret-alt-down',
-      svgIcon: caretAltDownIcon,
+      icon: icon || 'caret-alt-down',
+      svgIcon: svgIcon || caretAltDownIcon,
       iconClass: iconClassName,
       "aria-hidden": true
     }), dummySelect.call(this, value), renderListContainer.call(this)]);

package/dist/esm/DropDownList/DropDownListProps.d.ts

@@ -1,6 +1,7 @@
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { FormComponentProps } from '@progress/kendo-vue-common';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the object of the `filterChange` DropDownList event.
  */
@@ -110,6 +111,14 @@ export interface DropDownListProps extends FormComponentProps {
      * Sets additional classes to the DropDownList.
      */
     className?: string;
+    /**
+     * Defines the name for an existing arrow icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
      */

package/dist/esm/MultiSelect/MultiSelect.js

@@ -846,31 +846,6 @@ var MultiSelectVue2 = {
     }
     this.setItems(tagsToRender, this._tags);
     var isValid = !this.$props.validityStyles || this.validity().valid;
-    var renderClearButton = function renderClearButton(cbutton) {
-      if (cbutton) {
-        // @ts-ignore  function children
-        return h(ClearButton, {
-          onClearclick: this.clearButtonClick,
-          on: this.v3 ? undefined : {
-            "clearclick": this.clearButtonClick
-          },
-          key: "clearbutton"
-        });
-      }
-      return h("span");
-    };
-    var renderLoading = function renderLoading(cloading) {
-      if (cloading) {
-        return h(Icon, {
-          name: 'loading',
-          attrs: this.v3 ? undefined : {
-            name: 'loading'
-          },
-          "class": "k-input-loading-icon"
-        });
-      }
-      return h("span");
-    };
     var renderSearchBar = function renderSearchBar(searchId) {
       var _this = this;
       var activedescendant = this.activedescendant;
@@ -1132,7 +1107,16 @@ var MultiSelectVue2 = {
       }) : undefined
     }, this.v3 ? function () {
       return [renderSearchBar.call(_this4, id)];
-    } : [renderSearchBar.call(_this4, id)]), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
+    } : [renderSearchBar.call(_this4, id)]), clearButton && !loading &&
+    // @ts-ignore  function children
+    h(ClearButton, {
+      onClearclick: this.clearButtonClick,
+      on: this.v3 ? undefined : {
+        "clearclick": this.clearButtonClick
+      }
+    }), h("span", {
+      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1673512056,
+    publishDate: 1673797537,
     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/npm/AutoComplete/AutoComplete.js

@@ -667,27 +667,6 @@ var AutoCompleteVue2 = {
         }, [footer])])
       );
     };
-    var renderClearButton = function renderClearButton(cbutton) {
-      if (cbutton) {
-        // @ts-ignore  function children
-        return h(ClearButton_1.ClearButton, {
-          onClearclick: this.clearButtonClick,
-          on: this.v3 ? undefined : {
-            "clearclick": this.clearButtonClick
-          },
-          key: "clearbutton"
-        });
-      }
-      return h("span");
-    };
-    var renderLoading = function renderLoading(cloading) {
-      if (cloading) {
-        return h(kendo_vue_common_1.Icon, {
-          "class": "k-input-loading-icon"
-        });
-      }
-      return h("span");
-    };
     var autoComplete = h("span", {
       "class": (0, kendo_vue_common_1.classNames)('k-autocomplete k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-focus'] = focused && !disabled, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a)),
       ref: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this.anchor),
@@ -698,7 +677,16 @@ var AutoCompleteVue2 = {
       attrs: this.v3 ? undefined : {
         dir: dir
       }
-    }, [renderSearchBar.call(this, value || '', id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
+    }, [renderSearchBar.call(this, value || '', id), clearButton && !loading &&
+    // @ts-ignore  function children
+    h(ClearButton_1.ClearButton, {
+      onClearclick: this.clearButtonClick,
+      on: this.v3 ? undefined : {
+        "clearclick": this.clearButtonClick
+      }
+    }), h("span", {
+      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,

package/dist/npm/ComboBox/ComboBox.js

@@ -691,6 +691,8 @@ var ComboBoxVue2 = {
       className = _b.className,
       style = _b.style,
       loading = _b.loading,
+      icon = _b.icon,
+      svgIcon = _b.svgIcon,
       iconClassName = _b.iconClassName,
       virtual = _b.virtual,
       size = _b.size,
@@ -955,8 +957,8 @@ var ComboBoxVue2 = {
         size: size,
         fillMode: fillMode,
         rounded: null,
-        icon: 'caret-alt-down',
-        svgIcon: kendo_svg_icons_1.caretAltDownIcon,
+        icon: icon || 'caret-alt-down',
+        svgIcon: svgIcon || kendo_svg_icons_1.caretAltDownIcon,
         iconClass: iconClassName
       },
       tabIndex: -1,
@@ -965,8 +967,8 @@ var ComboBoxVue2 = {
       fillMode: fillMode,
       rounded: null,
       "class": 'k-input-button',
-      icon: 'caret-alt-down',
-      svgIcon: kendo_svg_icons_1.caretAltDownIcon,
+      icon: icon || 'caret-alt-down',
+      svgIcon: svgIcon || kendo_svg_icons_1.caretAltDownIcon,
       iconClass: iconClassName,
       onClick: this.toggleBtnClick,
       on: this.v3 ? undefined : {

package/dist/npm/ComboBox/ComboBoxProps.d.ts

@@ -1,6 +1,7 @@
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { FormComponentProps } from '@progress/kendo-vue-common';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the object of the `FilterChange` ComboBox event.
  */
@@ -56,6 +57,14 @@ export interface ComboBoxProps extends FormComponentProps {
      * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
      */
     defaultValue?: any;
+    /**
+     * Defines the name for an existing arrow icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
      */

package/dist/npm/DropDownList/DropDownList.js

@@ -97,6 +97,8 @@ var DropDownListVue2 = {
       type: Boolean,
       default: true
     },
+    icon: String,
+    svgIcon: Object,
     iconClassName: String,
     defaultItem: [Object, String],
     valueRender: [String, Function, Object],
@@ -722,6 +724,8 @@ var DropDownListVue2 = {
       disabled = _d.disabled,
       tabIndex = _d.tabIndex,
       loading = _d.loading,
+      icon = _d.icon,
+      svgIcon = _d.svgIcon,
       iconClassName = _d.iconClassName;
     var valueRender = kendo_vue_common_1.templateRendering.call(this, this.$props.valueRender, kendo_vue_common_1.getListeners.call(this));
     var focused = this.currentFocused;
@@ -1024,8 +1028,8 @@ var DropDownListVue2 = {
         fillMode: fillMode,
         rounded: null,
         ariaLabel: ariaLabelSelectButton,
-        icon: 'caret-alt-down',
-        svgIcon: kendo_svg_icons_1.caretAltDownIcon,
+        icon: icon || 'caret-alt-down',
+        svgIcon: svgIcon || kendo_svg_icons_1.caretAltDownIcon,
         iconClass: iconClassName,
         "aria-hidden": true
       },
@@ -1035,8 +1039,8 @@ var DropDownListVue2 = {
       rounded: null,
       ariaLabel: ariaLabelSelectButton,
       "class": 'k-input-button',
-      icon: 'caret-alt-down',
-      svgIcon: kendo_svg_icons_1.caretAltDownIcon,
+      icon: icon || 'caret-alt-down',
+      svgIcon: svgIcon || kendo_svg_icons_1.caretAltDownIcon,
       iconClass: iconClassName,
       "aria-hidden": true
     }), dummySelect.call(this, value), renderListContainer.call(this)]);

package/dist/npm/DropDownList/DropDownListProps.d.ts

@@ -1,6 +1,7 @@
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { FormComponentProps } from '@progress/kendo-vue-common';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the object of the `filterChange` DropDownList event.
  */
@@ -110,6 +111,14 @@ export interface DropDownListProps extends FormComponentProps {
      * Sets additional classes to the DropDownList.
      */
     className?: string;
+    /**
+     * Defines the name for an existing arrow icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets CSS classes to the expand `icon` DOM element.
      */