@progress/kendo-vue-buttons 3.7.4-dev.202211301436 → 3.7.4-dev.202212300853

package/dist/es/Button.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, getDefaultSlots, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots, validatePackage, kendoThemeMaps, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from './package-metadata';
 import util from './util';
 var styles = util.styles;
@@ -41,6 +41,7 @@ var ButtonVue2 = {
         return undefined;
       }
     },
+    svgIcon: Object,
     iconClass: {
       type: String,
       default: function _default() {
@@ -194,6 +195,7 @@ var ButtonVue2 = {
     var _a = this.$props,
       togglable = _a.togglable,
       icon = _a.icon,
+      svgIcon = _a.svgIcon,
       iconClass = _a.iconClass,
       imageUrl = _a.imageUrl,
       imageAlt = _a.imageAlt;
@@ -211,13 +213,15 @@ var ButtonVue2 = {
           alt: imageAlt,
           src: imageUrl
         });
-      } else if (icon) {
-        var iconClasses = classNames('k-icon', 'k-button-icon', 'k-i-' + icon, iconClass);
-        return h("span", {
-          role: "presentation",
+      } else if (icon || svgIcon) {
+        var iconClasses = classNames('k-button-icon', iconClass);
+        return h(Icon, {
+          name: icon,
           attrs: this.v3 ? undefined : {
-            role: "presentation"
+            name: icon,
+            icon: svgIcon
           },
+          icon: svgIcon,
           "class": iconClasses
         });
       } else if (iconClass) {

package/dist/es/ButtonInterface.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
@@ -41,6 +42,10 @@ export interface ButtonInterface {
      * Defines the name for an existing icon in a Kendo UI for Vue theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
      */
     icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
      */

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

@@ -56,6 +56,10 @@ export interface ChipProps {
      * Determines if the Chip style is `filled` or `outlined`.
      */
     look?: string;
+    /**
+     * Defines the avatar template that will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    avatar?: string | Function | Object;
     /**
      * Configures the `size` of the Chip.
      *

package/dist/es/Chip/Chip.js

@@ -4,7 +4,7 @@ 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 } from '@progress/kendo-vue-common';
+import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { FOCUS_ACTION } from './focus-reducer';
 import { DATA_ACTION } from './data-reducer';
 import { SELECTION_ACTION } from './selection-reducer';
@@ -17,6 +17,7 @@ var ChipVue2 = {
   props: {
     id: String,
     text: String,
+    avatar: [String, Function, Object],
     value: [String, Object],
     type: String,
     dir: {
@@ -254,7 +255,14 @@ var ChipVue2 = {
       themeColor = _b.themeColor,
       fillMode = _b.fillMode,
       look = _b.look,
-      type = _b.type;
+      type = _b.type,
+      avatar = _b.avatar,
+      icon = _b.icon;
+    var avatarTemplate = templateRendering.call(this, avatar, getListeners.call(this));
+    var avatarRender = getTemplate.call(this, {
+      h: h,
+      template: avatarTemplate
+    });
     return h("div", {
       role: this.$props.role,
       attrs: this.v3 ? undefined : {
@@ -262,7 +270,8 @@ var ChipVue2 = {
         id: this.$props.value,
         dir: this.currentDir,
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
-        "aria-checked": this.currentSelected,
+        "aria-pressed": this.$props.role === 'button' ? this.currentSelected : undefined,
+        "aria-selected": this.$props.role === 'option' ? this.currentSelected : undefined,
         "aria-disabled": this.$props.disabled,
         "aria-describedby": this.$props.ariaDescribedBy
       },
@@ -276,7 +285,8 @@ var ChipVue2 = {
         'k-selected': this.currentSelected,
         'k-focus': this.computedFocused()
       }, _a["k-chip-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a["k-chip-".concat(fillMode)] = fillMode, _a["k-chip-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor), _a['k-chip-success'] = type === 'success', _a['k-chip-warning'] = type === 'warning', _a['k-chip-error'] = type === 'error', _a['k-chip-info'] = type === 'info', _a['k-chip-outline'] = look === 'outline' || look === 'outlined', _a['k-chip-solid'] = look === 'solid' || look === 'filled', _a)),
-      "aria-checked": this.currentSelected,
+      "aria-pressed": this.$props.role === 'button' ? this.currentSelected : undefined,
+      "aria-selected": this.$props.role === 'option' ? this.currentSelected : undefined,
       "aria-disabled": this.$props.disabled,
       "aria-describedby": this.$props.ariaDescribedBy,
       onFocus: this.handleFocus,
@@ -289,11 +299,11 @@ var ChipVue2 = {
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown
-    }, [this.currentSelected && this.$props.selectedIcon && h("span", {
-      "class": classNames('k-chip-icon', 'k-icon', this.$props.selectedIcon)
-    }), this.$props.icon && h("span", {
-      "class": classNames('k-chip-icon', 'k-icon', this.$props.icon)
-    }), h("span", {
+    }, [this.currentSelected && this.$props.selectedIcon && h(Icon, {
+      "class": classNames('k-chip-icon', this.$props.selectedIcon)
+    }), icon && h(Icon, {
+      "class": classNames('k-chip-icon', icon)
+    }), avatar && avatarRender, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
       "aria-label": this.$props.text,
@@ -305,8 +315,8 @@ var ChipVue2 = {
       "class": "k-chip-actions"
     }, [h("span", {
       "class": "k-chip-action k-chip-remove-action"
-    }, [h("span", {
-      "class": classNames('k-icon', this.$props.removeIcon),
+    }, [h(Icon, {
+      "class": this.$props.removeIcon,
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { FloatingActionButtonItem } from './FloatingActionButtonItem';
 import { packageMetadata } from '../package-metadata';
 import { position, getAnchorAlign, getPopupAlign, getTextDirectionClass } from './utils';
@@ -21,6 +21,7 @@ var FloatingActionButtonVue2 = {
     accessKey: String,
     disabled: Boolean,
     icon: String,
+    svgIcon: Object,
     iconClass: String,
     items: [Object, Array],
     item: [String, Function, Object],
@@ -292,6 +293,7 @@ var FloatingActionButtonVue2 = {
       align = _a.align,
       disabled = _a.disabled,
       icon = _a.icon,
+      svgIcon = _a.svgIcon,
       iconClass = _a.iconClass,
       id = _a.id,
       items = _a.items,
@@ -384,17 +386,15 @@ var FloatingActionButtonVue2 = {
       onFocusin: this.handleFocus,
       onBlur: this.handleBlur,
       onKeydown: this.handleKeyDown
-    }, [icon ? h("span", {
-      role: "presentation",
+    }, [icon || svgIcon ? h(Icon, {
+      name: icon,
       attrs: this.v3 ? undefined : {
-        role: "presentation"
-      },
-      "class": classNames("k-fab-icon k-icon k-i-".concat(icon))
-    }) : iconClass ? h("span", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
+        name: icon,
+        svgIcon: svgIcon
       },
+      svgIcon: svgIcon,
+      "class": 'k-fab-icon'
+    }) : iconClass ? h(Icon, {
       "class": iconClass
     }) : null, text && h("span", {
       "class": "k-fab-text"

package/dist/es/FloatingActionButton/FloatingActionButtonItem.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';
 /**
  * The FloatingActionButtonItemHandle ref.
  */
@@ -36,6 +37,10 @@ export interface FloatingActionButtonItemProps {
      * [see example]({% slug databinding_floatingactionbutton %}).
      */
     icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies the text of the FloatingActionButtonItem
      * [see example]({% slug databinding_floatingactionbutton %}).

package/dist/es/FloatingActionButton/FloatingActionButtonItem.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, getRef, getTabIndex, getTemplate, setRef } from '@progress/kendo-vue-common';
+import { classNames, getRef, getTabIndex, getTemplate, Icon, setRef } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -67,10 +67,10 @@ var FloatingActionButtonItemVue2 = {
       disabled = _a.disabled,
       id = _a.id,
       tabIndex = _a.tabIndex,
-      dataItem = _a.dataItem,
-      customProp = _a.customProp;
+      dataItem = _a.dataItem;
     var text = dataItem.text,
-      icon = dataItem.icon;
+      icon = dataItem.icon,
+      svgIcon = dataItem.svgIcon;
     var item;
     var itemDefaultRendering = h("li", {
       ref: setRef(this, 'element'),
@@ -97,8 +97,14 @@ var FloatingActionButtonItemVue2 = {
       onPointerdown: this.onDown
     }, [text && h("span", {
       "class": "k-fab-item-text"
-    }, [text]), icon && h("span", {
-      "class": classNames("k-fab-item-icon k-icon k-i-".concat(icon))
+    }, [text]), icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon,
+        svgIcon: svgIcon
+      },
+      svgIcon: svgIcon,
+      "class": "k-fab-item-icon"
     })]);
     item = getTemplate.call(this, {
       h: h,

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -5,6 +5,7 @@ import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../mod
 import { FloatingActionButtonPositionMode } from '../models/position-mode';
 import { FloatingActionButtonSize } from '../models/size';
 import { FloatingActionButtonThemeColor } from '../models/theme-color';
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -41,6 +42,10 @@ export interface FloatingActionButtonProps extends Omit<any, 'onBlur' | 'onFocus
      *  Button [see example]({% slug contenttypes_floatingactionbutton %}).
      */
     icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class or multiple classes separated by spaces which are applied
      * to a `span` element inside the Floating Action Button. Allows the usage of custom icons.

package/dist/es/ListButton/ButtonItem.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTemplate } from '@progress/kendo-vue-common';
+import { getTemplate, Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -65,7 +65,6 @@ var ButtonItemVue2 = {
         textField = _a.textField,
         index = _a.index;
       var text = dataItem.text !== undefined ? dataItem.text : textField ? dataItem[textField] : dataItem;
-      var iconClass = dataItem.icon ? "k-icon k-i-".concat(dataItem.icon) : dataItem.iconClass;
       var itemContent = h("span", {
         tabindex: -1,
         attrs: this.v3 ? undefined : {
@@ -73,8 +72,16 @@ var ButtonItemVue2 = {
         },
         "class": this.innerClass,
         key: "icon"
-      }, [iconClass && h("span", {
-        "class": iconClass,
+      }, [dataItem.icon || dataItem.svgIcon ? h(Icon, {
+        name: dataItem.icon,
+        attrs: this.v3 ? undefined : {
+          name: dataItem.icon,
+          svgIcon: dataItem.svgIcon
+        },
+        svgIcon: dataItem.svgIcon,
+        "class": dataItem.iconClass
+      }) : dataItem.iconClass && h("span", {
+        "class": dataItem.iconClass,
         role: "presentation",
         attrs: this.v3 ? undefined : {
           role: "presentation"

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: 1669818159,
+    publishDate: 1672389521,
     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/toolbar/Toolbar.js

@@ -94,7 +94,7 @@ var ToolbarVue2 = {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     return h("div", {
-      "class": 'k-widget k-toolbar',
+      "class": 'k-toolbar',
       role: "toolbar",
       attrs: this.v3 ? undefined : {
         role: "toolbar",

package/dist/esm/Button.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, getDefaultSlots, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots, validatePackage, kendoThemeMaps, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from './package-metadata.js';
 import util from './util.js';
 var styles = util.styles;
@@ -41,6 +41,7 @@ var ButtonVue2 = {
         return undefined;
       }
     },
+    svgIcon: Object,
     iconClass: {
       type: String,
       default: function _default() {
@@ -194,6 +195,7 @@ var ButtonVue2 = {
     var _a = this.$props,
       togglable = _a.togglable,
       icon = _a.icon,
+      svgIcon = _a.svgIcon,
       iconClass = _a.iconClass,
       imageUrl = _a.imageUrl,
       imageAlt = _a.imageAlt;
@@ -211,13 +213,15 @@ var ButtonVue2 = {
           alt: imageAlt,
           src: imageUrl
         });
-      } else if (icon) {
-        var iconClasses = classNames('k-icon', 'k-button-icon', 'k-i-' + icon, iconClass);
-        return h("span", {
-          role: "presentation",
+      } else if (icon || svgIcon) {
+        var iconClasses = classNames('k-button-icon', iconClass);
+        return h(Icon, {
+          name: icon,
           attrs: this.v3 ? undefined : {
-            role: "presentation"
+            name: icon,
+            icon: svgIcon
           },
+          icon: svgIcon,
           "class": iconClasses
         });
       } else if (iconClass) {

package/dist/esm/ButtonInterface.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
@@ -41,6 +42,10 @@ export interface ButtonInterface {
      * Defines the name for an existing icon in a Kendo UI for Vue theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
      */
     icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
      */

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

@@ -56,6 +56,10 @@ export interface ChipProps {
      * Determines if the Chip style is `filled` or `outlined`.
      */
     look?: string;
+    /**
+     * Defines the avatar template that will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    avatar?: string | Function | Object;
     /**
      * Configures the `size` of the Chip.
      *

package/dist/esm/Chip/Chip.js

@@ -4,7 +4,7 @@ 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 } from '@progress/kendo-vue-common';
+import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { FOCUS_ACTION } from './focus-reducer.js';
 import { DATA_ACTION } from './data-reducer.js';
 import { SELECTION_ACTION } from './selection-reducer.js';
@@ -17,6 +17,7 @@ var ChipVue2 = {
   props: {
     id: String,
     text: String,
+    avatar: [String, Function, Object],
     value: [String, Object],
     type: String,
     dir: {
@@ -254,7 +255,14 @@ var ChipVue2 = {
       themeColor = _b.themeColor,
       fillMode = _b.fillMode,
       look = _b.look,
-      type = _b.type;
+      type = _b.type,
+      avatar = _b.avatar,
+      icon = _b.icon;
+    var avatarTemplate = templateRendering.call(this, avatar, getListeners.call(this));
+    var avatarRender = getTemplate.call(this, {
+      h: h,
+      template: avatarTemplate
+    });
     return h("div", {
       role: this.$props.role,
       attrs: this.v3 ? undefined : {
@@ -262,7 +270,8 @@ var ChipVue2 = {
         id: this.$props.value,
         dir: this.currentDir,
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
-        "aria-checked": this.currentSelected,
+        "aria-pressed": this.$props.role === 'button' ? this.currentSelected : undefined,
+        "aria-selected": this.$props.role === 'option' ? this.currentSelected : undefined,
         "aria-disabled": this.$props.disabled,
         "aria-describedby": this.$props.ariaDescribedBy
       },
@@ -276,7 +285,8 @@ var ChipVue2 = {
         'k-selected': this.currentSelected,
         'k-focus': this.computedFocused()
       }, _a["k-chip-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a["k-chip-".concat(fillMode)] = fillMode, _a["k-chip-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor), _a['k-chip-success'] = type === 'success', _a['k-chip-warning'] = type === 'warning', _a['k-chip-error'] = type === 'error', _a['k-chip-info'] = type === 'info', _a['k-chip-outline'] = look === 'outline' || look === 'outlined', _a['k-chip-solid'] = look === 'solid' || look === 'filled', _a)),
-      "aria-checked": this.currentSelected,
+      "aria-pressed": this.$props.role === 'button' ? this.currentSelected : undefined,
+      "aria-selected": this.$props.role === 'option' ? this.currentSelected : undefined,
       "aria-disabled": this.$props.disabled,
       "aria-describedby": this.$props.ariaDescribedBy,
       onFocus: this.handleFocus,
@@ -289,11 +299,11 @@ var ChipVue2 = {
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown
-    }, [this.currentSelected && this.$props.selectedIcon && h("span", {
-      "class": classNames('k-chip-icon', 'k-icon', this.$props.selectedIcon)
-    }), this.$props.icon && h("span", {
-      "class": classNames('k-chip-icon', 'k-icon', this.$props.icon)
-    }), h("span", {
+    }, [this.currentSelected && this.$props.selectedIcon && h(Icon, {
+      "class": classNames('k-chip-icon', this.$props.selectedIcon)
+    }), icon && h(Icon, {
+      "class": classNames('k-chip-icon', icon)
+    }), avatar && avatarRender, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
       "aria-label": this.$props.text,
@@ -305,8 +315,8 @@ var ChipVue2 = {
       "class": "k-chip-actions"
     }, [h("span", {
       "class": "k-chip-action k-chip-remove-action"
-    }, [h("span", {
-      "class": classNames('k-icon', this.$props.removeIcon),
+    }, [h(Icon, {
+      "class": this.$props.removeIcon,
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove

package/dist/esm/FloatingActionButton/FloatingActionButton.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { FloatingActionButtonItem } from './FloatingActionButtonItem.js';
 import { packageMetadata } from '../package-metadata.js';
 import { position, getAnchorAlign, getPopupAlign, getTextDirectionClass } from './utils.js';
@@ -21,6 +21,7 @@ var FloatingActionButtonVue2 = {
     accessKey: String,
     disabled: Boolean,
     icon: String,
+    svgIcon: Object,
     iconClass: String,
     items: [Object, Array],
     item: [String, Function, Object],
@@ -292,6 +293,7 @@ var FloatingActionButtonVue2 = {
       align = _a.align,
       disabled = _a.disabled,
       icon = _a.icon,
+      svgIcon = _a.svgIcon,
       iconClass = _a.iconClass,
       id = _a.id,
       items = _a.items,
@@ -384,17 +386,15 @@ var FloatingActionButtonVue2 = {
       onFocusin: this.handleFocus,
       onBlur: this.handleBlur,
       onKeydown: this.handleKeyDown
-    }, [icon ? h("span", {
-      role: "presentation",
+    }, [icon || svgIcon ? h(Icon, {
+      name: icon,
       attrs: this.v3 ? undefined : {
-        role: "presentation"
-      },
-      "class": classNames("k-fab-icon k-icon k-i-".concat(icon))
-    }) : iconClass ? h("span", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
+        name: icon,
+        svgIcon: svgIcon
       },
+      svgIcon: svgIcon,
+      "class": 'k-fab-icon'
+    }) : iconClass ? h(Icon, {
       "class": iconClass
     }) : null, text && h("span", {
       "class": "k-fab-text"

package/dist/esm/FloatingActionButton/FloatingActionButtonItem.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';
 /**
  * The FloatingActionButtonItemHandle ref.
  */
@@ -36,6 +37,10 @@ export interface FloatingActionButtonItemProps {
      * [see example]({% slug databinding_floatingactionbutton %}).
      */
     icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies the text of the FloatingActionButtonItem
      * [see example]({% slug databinding_floatingactionbutton %}).

package/dist/esm/FloatingActionButton/FloatingActionButtonItem.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, getRef, getTabIndex, getTemplate, setRef } from '@progress/kendo-vue-common';
+import { classNames, getRef, getTabIndex, getTemplate, Icon, setRef } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -67,10 +67,10 @@ var FloatingActionButtonItemVue2 = {
       disabled = _a.disabled,
       id = _a.id,
       tabIndex = _a.tabIndex,
-      dataItem = _a.dataItem,
-      customProp = _a.customProp;
+      dataItem = _a.dataItem;
     var text = dataItem.text,
-      icon = dataItem.icon;
+      icon = dataItem.icon,
+      svgIcon = dataItem.svgIcon;
     var item;
     var itemDefaultRendering = h("li", {
       ref: setRef(this, 'element'),
@@ -97,8 +97,14 @@ var FloatingActionButtonItemVue2 = {
       onPointerdown: this.onDown
     }, [text && h("span", {
       "class": "k-fab-item-text"
-    }, [text]), icon && h("span", {
-      "class": classNames("k-fab-item-icon k-icon k-i-".concat(icon))
+    }, [text]), icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon,
+        svgIcon: svgIcon
+      },
+      svgIcon: svgIcon,
+      "class": "k-fab-item-icon"
     })]);
     item = getTemplate.call(this, {
       h: h,

package/dist/esm/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -5,6 +5,7 @@ import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../mod
 import { FloatingActionButtonPositionMode } from '../models/position-mode';
 import { FloatingActionButtonSize } from '../models/size';
 import { FloatingActionButtonThemeColor } from '../models/theme-color';
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -41,6 +42,10 @@ export interface FloatingActionButtonProps extends Omit<any, 'onBlur' | 'onFocus
      *  Button [see example]({% slug contenttypes_floatingactionbutton %}).
      */
     icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class or multiple classes separated by spaces which are applied
      * to a `span` element inside the Floating Action Button. Allows the usage of custom icons.

package/dist/esm/ListButton/ButtonItem.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTemplate } from '@progress/kendo-vue-common';
+import { getTemplate, Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -65,7 +65,6 @@ var ButtonItemVue2 = {
         textField = _a.textField,
         index = _a.index;
       var text = dataItem.text !== undefined ? dataItem.text : textField ? dataItem[textField] : dataItem;
-      var iconClass = dataItem.icon ? "k-icon k-i-".concat(dataItem.icon) : dataItem.iconClass;
       var itemContent = h("span", {
         tabindex: -1,
         attrs: this.v3 ? undefined : {
@@ -73,8 +72,16 @@ var ButtonItemVue2 = {
         },
         "class": this.innerClass,
         key: "icon"
-      }, [iconClass && h("span", {
-        "class": iconClass,
+      }, [dataItem.icon || dataItem.svgIcon ? h(Icon, {
+        name: dataItem.icon,
+        attrs: this.v3 ? undefined : {
+          name: dataItem.icon,
+          svgIcon: dataItem.svgIcon
+        },
+        svgIcon: dataItem.svgIcon,
+        "class": dataItem.iconClass
+      }) : dataItem.iconClass && h("span", {
+        "class": dataItem.iconClass,
         role: "presentation",
         attrs: this.v3 ? undefined : {
           role: "presentation"