@progress/kendo-vue-buttons 3.10.2 → 3.11.0-dev.202305230751

package/dist/es/ButtonInterface.d.ts

@@ -47,7 +47,7 @@ export interface ButtonInterface {
      */
     icon?: string;
     /**
-     * Defines the svg icon in a Kendo UI for Vue theme.
+     * Defines an SVGIcon to be rendered within the button.
      */
     svgIcon?: SVGIcon;
     /**

package/dist/es/Chip/Chip.d.ts

@@ -3,6 +3,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { SVGIcon } from '@progress/kendo-vue-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
@@ -36,6 +37,10 @@ export interface ChipProps {
      * Determines if the Chip has custom `removeIcon`.
      */
     removeIcon?: string;
+    /**
+     * Defines an remove SVGIcon to be rendered within the chip.
+     */
+    removeSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip is disabled.
      */
@@ -44,10 +49,18 @@ export interface ChipProps {
      * Determines if the Chip has an `icon`.
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the chip.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Determines if the Chip has custom selection `icon`.
      */
     selectedIcon?: string;
+    /**
+     * Defines an selection SVGIcon to be rendered within the chip.
+     */
+    selectedSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip style is `filled` or `outlined`.
      */

package/dist/es/Chip/Chip.js

@@ -4,7 +4,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
+import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef, templateRendering, getListeners, getTemplate, Icon, getIconName } from '@progress/kendo-vue-common';
+import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import { FOCUS_ACTION } from './focus-reducer';
 import { DATA_ACTION } from './data-reducer';
 import { SELECTION_ACTION } from './selection-reducer';
@@ -35,17 +36,30 @@ var ChipVue2 = {
         return 'x-circle';
       }
     },
+    removeSvgIcon: {
+      type: Object,
+      default: function _default() {
+        return xCircleIcon;
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
     },
     icon: String,
+    svgIcon: Object,
     selectedIcon: {
       type: String,
       default: function _default() {
         return 'check';
       }
     },
+    selectedSvgIcon: {
+      type: Object,
+      default: function _default() {
+        return checkIcon;
+      }
+    },
     look: {
       type: String,
       default: function _default() {
@@ -143,9 +157,6 @@ var ChipVue2 = {
     }
   },
   methods: {
-    getIconName: function getIconName(currentIconName) {
-      return currentIconName && currentIconName.indexOf('k-i-') !== -1 ? currentIconName.split('k-i-')[1] : currentIconName;
-    },
     computedFocused: function computedFocused() {
       return this.kendoFocused.value === this.$props.value;
     },
@@ -268,7 +279,12 @@ var ChipVue2 = {
       fillMode = _b.fillMode,
       look = _b.look,
       avatar = _b.avatar,
-      icon = _b.icon;
+      icon = _b.icon,
+      svgIcon = _b.svgIcon,
+      selectedIcon = _b.selectedIcon,
+      selectedSvgIcon = _b.selectedSvgIcon,
+      removeIcon = _b.removeIcon,
+      removeSvgIcon = _b.removeSvgIcon;
     var avatarTemplate = templateRendering.call(this, avatar, getListeners.call(this));
     var avatarRender = getTemplate.call(this, {
       h: h,
@@ -310,16 +326,24 @@ var ChipVue2 = {
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown
-    }, [this.currentSelected && this.$props.selectedIcon && h(Icon, {
-      name: this.getIconName(this.$props.selectedIcon),
+    }, [this.currentSelected && (selectedIcon || selectedSvgIcon) && h(Icon, {
+      name: getIconName(selectedIcon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(this.$props.selectedIcon)
-      }
-    }), icon && h(Icon, {
-      name: this.getIconName(icon),
+        name: getIconName(selectedIcon),
+        icon: selectedSvgIcon,
+        size: 'small'
+      },
+      icon: selectedSvgIcon,
+      size: 'small'
+    }), (icon || svgIcon) && h(Icon, {
+      name: getIconName(icon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(icon)
-      }
+        name: getIconName(icon),
+        icon: svgIcon,
+        size: 'small'
+      },
+      icon: svgIcon,
+      size: 'small'
     }), avatar && avatarRender, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
@@ -333,10 +357,14 @@ var ChipVue2 = {
     }, [h("span", {
       "class": "k-chip-action k-chip-remove-action"
     }, [h(Icon, {
-      name: this.getIconName(this.$props.removeIcon),
+      name: getIconName(removeIcon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(this.$props.removeIcon)
+        name: getIconName(removeIcon),
+        icon: removeSvgIcon,
+        size: 'small'
       },
+      icon: removeSvgIcon,
+      size: 'small',
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove

package/dist/es/ListButton/DropDownButton.js

@@ -52,6 +52,7 @@ var DropDownButtonVue2 = {
     tabIndex: Number,
     disabled: Boolean,
     icon: String,
+    svgIcon: Object,
     iconClass: String,
     imageUrl: String,
     popupSettings: Object,
@@ -274,6 +275,7 @@ var DropDownButtonVue2 = {
         tabIndex: tabIndex,
         accessKey: this.$props.accessKey,
         icon: this.$props.icon,
+        svgIcon: this.$props.svgIcon,
         iconClass: this.$props.iconClass,
         imageUrl: this.$props.imageUrl,
         look: this.$props.look,
@@ -301,6 +303,7 @@ var DropDownButtonVue2 = {
       tabIndex: tabIndex,
       accessKey: this.$props.accessKey,
       icon: this.$props.icon,
+      svgIcon: this.$props.svgIcon,
       iconClass: this.$props.iconClass,
       "class": this.$props.buttonClass,
       imageUrl: this.$props.imageUrl,

package/dist/es/ListButton/SplitButton.js

@@ -52,6 +52,7 @@ var SplitButtonVue2 = {
     tabIndex: Number,
     disabled: Boolean,
     icon: String,
+    svgIcon: Object,
     size: {
       type: String,
       default: 'medium'
@@ -269,6 +270,7 @@ var SplitButtonVue2 = {
         tabIndex: tabIndex,
         accessKey: this.$props.accessKey,
         icon: this.$props.icon,
+        svgIcon: this.$props.svgIcon,
         iconClass: this.$props.iconClass,
         imageUrl: this.$props.imageUrl,
         look: this.$props.look,
@@ -298,6 +300,7 @@ var SplitButtonVue2 = {
       accessKey: this.$props.accessKey,
       "class": this.$props.buttonClass,
       icon: this.$props.icon,
+      svgIcon: this.$props.svgIcon,
       iconClass: this.$props.iconClass,
       imageUrl: this.$props.imageUrl,
       look: this.$props.look,

package/dist/es/ListButton/models/ListButtonProps.d.ts

@@ -1,6 +1,7 @@
 import { ButtonsPopupSettings } from './PopupSettings';
 import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events';
 import { ButtonLook } from '../../buttonLook';
+import { SVGIcon } from '@progress/kendo-vue-common';
 export interface DropDownButtonProps {
     /**
      * Specifies the `accessKey` of the main button.
@@ -38,6 +39,10 @@ export interface DropDownButtonProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the DropDownButton.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
@@ -199,6 +204,10 @@ export interface SplitButtonProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the SplitButton.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-buttons',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1684762545,
+    publishDate: 1684827554,
     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/ButtonInterface.d.ts

@@ -47,7 +47,7 @@ export interface ButtonInterface {
      */
     icon?: string;
     /**
-     * Defines the svg icon in a Kendo UI for Vue theme.
+     * Defines an SVGIcon to be rendered within the button.
      */
     svgIcon?: SVGIcon;
     /**

package/dist/esm/Chip/Chip.d.ts

@@ -3,6 +3,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { SVGIcon } from '@progress/kendo-vue-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
@@ -36,6 +37,10 @@ export interface ChipProps {
      * Determines if the Chip has custom `removeIcon`.
      */
     removeIcon?: string;
+    /**
+     * Defines an remove SVGIcon to be rendered within the chip.
+     */
+    removeSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip is disabled.
      */
@@ -44,10 +49,18 @@ export interface ChipProps {
      * Determines if the Chip has an `icon`.
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the chip.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Determines if the Chip has custom selection `icon`.
      */
     selectedIcon?: string;
+    /**
+     * Defines an selection SVGIcon to be rendered within the chip.
+     */
+    selectedSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip style is `filled` or `outlined`.
      */

package/dist/esm/Chip/Chip.js

@@ -4,7 +4,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
+import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef, templateRendering, getListeners, getTemplate, Icon, getIconName } from '@progress/kendo-vue-common';
+import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import { FOCUS_ACTION } from './focus-reducer.js';
 import { DATA_ACTION } from './data-reducer.js';
 import { SELECTION_ACTION } from './selection-reducer.js';
@@ -35,17 +36,30 @@ var ChipVue2 = {
         return 'x-circle';
       }
     },
+    removeSvgIcon: {
+      type: Object,
+      default: function _default() {
+        return xCircleIcon;
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
     },
     icon: String,
+    svgIcon: Object,
     selectedIcon: {
       type: String,
       default: function _default() {
         return 'check';
       }
     },
+    selectedSvgIcon: {
+      type: Object,
+      default: function _default() {
+        return checkIcon;
+      }
+    },
     look: {
       type: String,
       default: function _default() {
@@ -143,9 +157,6 @@ var ChipVue2 = {
     }
   },
   methods: {
-    getIconName: function getIconName(currentIconName) {
-      return currentIconName && currentIconName.indexOf('k-i-') !== -1 ? currentIconName.split('k-i-')[1] : currentIconName;
-    },
     computedFocused: function computedFocused() {
       return this.kendoFocused.value === this.$props.value;
     },
@@ -268,7 +279,12 @@ var ChipVue2 = {
       fillMode = _b.fillMode,
       look = _b.look,
       avatar = _b.avatar,
-      icon = _b.icon;
+      icon = _b.icon,
+      svgIcon = _b.svgIcon,
+      selectedIcon = _b.selectedIcon,
+      selectedSvgIcon = _b.selectedSvgIcon,
+      removeIcon = _b.removeIcon,
+      removeSvgIcon = _b.removeSvgIcon;
     var avatarTemplate = templateRendering.call(this, avatar, getListeners.call(this));
     var avatarRender = getTemplate.call(this, {
       h: h,
@@ -310,16 +326,24 @@ var ChipVue2 = {
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown
-    }, [this.currentSelected && this.$props.selectedIcon && h(Icon, {
-      name: this.getIconName(this.$props.selectedIcon),
+    }, [this.currentSelected && (selectedIcon || selectedSvgIcon) && h(Icon, {
+      name: getIconName(selectedIcon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(this.$props.selectedIcon)
-      }
-    }), icon && h(Icon, {
-      name: this.getIconName(icon),
+        name: getIconName(selectedIcon),
+        icon: selectedSvgIcon,
+        size: 'small'
+      },
+      icon: selectedSvgIcon,
+      size: 'small'
+    }), (icon || svgIcon) && h(Icon, {
+      name: getIconName(icon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(icon)
-      }
+        name: getIconName(icon),
+        icon: svgIcon,
+        size: 'small'
+      },
+      icon: svgIcon,
+      size: 'small'
     }), avatar && avatarRender, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
@@ -333,10 +357,14 @@ var ChipVue2 = {
     }, [h("span", {
       "class": "k-chip-action k-chip-remove-action"
     }, [h(Icon, {
-      name: this.getIconName(this.$props.removeIcon),
+      name: getIconName(removeIcon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(this.$props.removeIcon)
+        name: getIconName(removeIcon),
+        icon: removeSvgIcon,
+        size: 'small'
       },
+      icon: removeSvgIcon,
+      size: 'small',
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove

package/dist/esm/ListButton/DropDownButton.js

@@ -52,6 +52,7 @@ var DropDownButtonVue2 = {
     tabIndex: Number,
     disabled: Boolean,
     icon: String,
+    svgIcon: Object,
     iconClass: String,
     imageUrl: String,
     popupSettings: Object,
@@ -274,6 +275,7 @@ var DropDownButtonVue2 = {
         tabIndex: tabIndex,
         accessKey: this.$props.accessKey,
         icon: this.$props.icon,
+        svgIcon: this.$props.svgIcon,
         iconClass: this.$props.iconClass,
         imageUrl: this.$props.imageUrl,
         look: this.$props.look,
@@ -301,6 +303,7 @@ var DropDownButtonVue2 = {
       tabIndex: tabIndex,
       accessKey: this.$props.accessKey,
       icon: this.$props.icon,
+      svgIcon: this.$props.svgIcon,
       iconClass: this.$props.iconClass,
       "class": this.$props.buttonClass,
       imageUrl: this.$props.imageUrl,

package/dist/esm/ListButton/SplitButton.js

@@ -52,6 +52,7 @@ var SplitButtonVue2 = {
     tabIndex: Number,
     disabled: Boolean,
     icon: String,
+    svgIcon: Object,
     size: {
       type: String,
       default: 'medium'
@@ -269,6 +270,7 @@ var SplitButtonVue2 = {
         tabIndex: tabIndex,
         accessKey: this.$props.accessKey,
         icon: this.$props.icon,
+        svgIcon: this.$props.svgIcon,
         iconClass: this.$props.iconClass,
         imageUrl: this.$props.imageUrl,
         look: this.$props.look,
@@ -298,6 +300,7 @@ var SplitButtonVue2 = {
       accessKey: this.$props.accessKey,
       "class": this.$props.buttonClass,
       icon: this.$props.icon,
+      svgIcon: this.$props.svgIcon,
       iconClass: this.$props.iconClass,
       imageUrl: this.$props.imageUrl,
       look: this.$props.look,

package/dist/esm/ListButton/models/ListButtonProps.d.ts

@@ -1,6 +1,7 @@
 import { ButtonsPopupSettings } from './PopupSettings';
 import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events';
 import { ButtonLook } from '../../buttonLook';
+import { SVGIcon } from '@progress/kendo-vue-common';
 export interface DropDownButtonProps {
     /**
      * Specifies the `accessKey` of the main button.
@@ -38,6 +39,10 @@ export interface DropDownButtonProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the DropDownButton.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
@@ -199,6 +204,10 @@ export interface SplitButtonProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the SplitButton.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-buttons',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1684762545,
+    publishDate: 1684827554,
     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/ButtonInterface.d.ts

@@ -47,7 +47,7 @@ export interface ButtonInterface {
      */
     icon?: string;
     /**
-     * Defines the svg icon in a Kendo UI for Vue theme.
+     * Defines an SVGIcon to be rendered within the button.
      */
     svgIcon?: SVGIcon;
     /**

package/dist/npm/Chip/Chip.d.ts

@@ -3,6 +3,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { SVGIcon } from '@progress/kendo-vue-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
@@ -36,6 +37,10 @@ export interface ChipProps {
      * Determines if the Chip has custom `removeIcon`.
      */
     removeIcon?: string;
+    /**
+     * Defines an remove SVGIcon to be rendered within the chip.
+     */
+    removeSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip is disabled.
      */
@@ -44,10 +49,18 @@ export interface ChipProps {
      * Determines if the Chip has an `icon`.
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the chip.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Determines if the Chip has custom selection `icon`.
      */
     selectedIcon?: string;
+    /**
+     * Defines an selection SVGIcon to be rendered within the chip.
+     */
+    selectedSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip style is `filled` or `outlined`.
      */

package/dist/npm/Chip/Chip.js

@@ -11,6 +11,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var focus_reducer_1 = require("./focus-reducer");
 var data_reducer_1 = require("./data-reducer");
 var selection_reducer_1 = require("./selection-reducer");
@@ -41,17 +42,30 @@ var ChipVue2 = {
         return 'x-circle';
       }
     },
+    removeSvgIcon: {
+      type: Object,
+      default: function _default() {
+        return kendo_svg_icons_1.xCircleIcon;
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
     },
     icon: String,
+    svgIcon: Object,
     selectedIcon: {
       type: String,
       default: function _default() {
         return 'check';
       }
     },
+    selectedSvgIcon: {
+      type: Object,
+      default: function _default() {
+        return kendo_svg_icons_1.checkIcon;
+      }
+    },
     look: {
       type: String,
       default: function _default() {
@@ -149,9 +163,6 @@ var ChipVue2 = {
     }
   },
   methods: {
-    getIconName: function getIconName(currentIconName) {
-      return currentIconName && currentIconName.indexOf('k-i-') !== -1 ? currentIconName.split('k-i-')[1] : currentIconName;
-    },
     computedFocused: function computedFocused() {
       return this.kendoFocused.value === this.$props.value;
     },
@@ -274,7 +285,12 @@ var ChipVue2 = {
       fillMode = _b.fillMode,
       look = _b.look,
       avatar = _b.avatar,
-      icon = _b.icon;
+      icon = _b.icon,
+      svgIcon = _b.svgIcon,
+      selectedIcon = _b.selectedIcon,
+      selectedSvgIcon = _b.selectedSvgIcon,
+      removeIcon = _b.removeIcon,
+      removeSvgIcon = _b.removeSvgIcon;
     var avatarTemplate = kendo_vue_common_1.templateRendering.call(this, avatar, kendo_vue_common_1.getListeners.call(this));
     var avatarRender = kendo_vue_common_1.getTemplate.call(this, {
       h: h,
@@ -316,16 +332,24 @@ var ChipVue2 = {
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown
-    }, [this.currentSelected && this.$props.selectedIcon && h(kendo_vue_common_1.Icon, {
-      name: this.getIconName(this.$props.selectedIcon),
+    }, [this.currentSelected && (selectedIcon || selectedSvgIcon) && h(kendo_vue_common_1.Icon, {
+      name: (0, kendo_vue_common_1.getIconName)(selectedIcon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(this.$props.selectedIcon)
-      }
-    }), icon && h(kendo_vue_common_1.Icon, {
-      name: this.getIconName(icon),
+        name: (0, kendo_vue_common_1.getIconName)(selectedIcon),
+        icon: selectedSvgIcon,
+        size: 'small'
+      },
+      icon: selectedSvgIcon,
+      size: 'small'
+    }), (icon || svgIcon) && h(kendo_vue_common_1.Icon, {
+      name: (0, kendo_vue_common_1.getIconName)(icon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(icon)
-      }
+        name: (0, kendo_vue_common_1.getIconName)(icon),
+        icon: svgIcon,
+        size: 'small'
+      },
+      icon: svgIcon,
+      size: 'small'
     }), avatar && avatarRender, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
@@ -339,10 +363,14 @@ var ChipVue2 = {
     }, [h("span", {
       "class": "k-chip-action k-chip-remove-action"
     }, [h(kendo_vue_common_1.Icon, {
-      name: this.getIconName(this.$props.removeIcon),
+      name: (0, kendo_vue_common_1.getIconName)(removeIcon),
       attrs: this.v3 ? undefined : {
-        name: this.getIconName(this.$props.removeIcon)
+        name: (0, kendo_vue_common_1.getIconName)(removeIcon),
+        icon: removeSvgIcon,
+        size: 'small'
       },
+      icon: removeSvgIcon,
+      size: 'small',
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove