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

package/dist/es/bottomnavigation/BottomNavigation.js

@@ -33,6 +33,13 @@ var BottomNavigationVue2 = {
         return ['solid', 'flat'].includes(value);
       }
     },
+    fillMode: {
+      type: String,
+      default: 'flat',
+      validator: function validator(value) {
+        return ['solid', 'flat'].includes(value);
+      }
+    },
     item: [String, Object, Function],
     items: Array,
     itemFlow: {
@@ -65,11 +72,12 @@ var BottomNavigationVue2 = {
       var _a;
       var _b = this.$props,
         themeColor = _b.themeColor,
-        fill = _b.fill,
+        fillMode = _b.fillMode,
         positionMode = _b.positionMode,
         itemFlow = _b.itemFlow,
         border = _b.border,
         disabled = _b.disabled;
+      var fill = fillMode !== undefined ? fillMode : this.$props.fill;
       return _a = {
         'k-bottom-nav': true
       }, _a[POSITION_MODE_CLASSES[positionMode]] = true, _a[THEME_COLOR_CLASSES[themeColor]] = true, _a[FILL_CLASSES[fill]] = true, _a[ITEM_FLOW_CLASSES[itemFlow]] = true, _a['k-bottom-nav-border'] = border, _a['k-disabled'] = disabled, _a;

package/dist/es/bottomnavigation/BottomNavigationItem.js

@@ -63,7 +63,8 @@ var BottomNavigationItemVue2 = {
       index = _a.index,
       tabIndex = _a.tabIndex;
     var icon = dataItem.icon,
-      text = dataItem.text;
+      text = dataItem.text,
+      svgIcon = dataItem.svgIcon;
     var content = getTemplate.call(this, {
       h: h,
       template: item,
@@ -96,8 +97,12 @@ var BottomNavigationItemVue2 = {
     }, [this.$props.item ? content : [icon && h(Icon, {
       name: icon,
       attrs: this.v3 ? undefined : {
-        name: icon
+        name: icon,
+        icon: svgIcon,
+        size: 'xlarge'
       },
+      icon: svgIcon,
+      size: 'xlarge',
       "class": "k-bottom-nav-item-icon"
     }), text && h("span", {
       "class": 'k-bottom-nav-item-text',

package/dist/es/bottomnavigation/BottomNavigationProps.d.ts

@@ -37,6 +37,10 @@ export interface BottomNavigationProps {
      * * `flat`(Default) — Sets the theme color as the text color. The background will be white.
      * * `solid` — Sets the theme color as a background color.
      */
+    fillMode?: BottomNavigationFill | string;
+    /**
+     * @hidden
+     */
     fill?: BottomNavigationFill | string;
     /**
      * Specifies the position and behavior of the BottomNavigation when the page is scrolled

package/dist/es/drawer/DrawerContent.d.ts

@@ -72,20 +72,20 @@ declare let DrawerContentVue2: ComponentOptions<DrawerContentAll, DefaultData<Dr
  *       items: [
  *         {
  *           text: "Inbox",
- *           icon: "k-i-inbox",
+ *           icon: "inbox",
  *           selected: true,
  *         },
  *         {
  *           text: "Calendar",
- *           icon: "k-i-calendar",
+ *           icon: "calendar",
  *         },
  *         {
  *           text: "Attachments",
- *           icon: "k-i-hyperlink-email",
+ *           icon: "hyperlink-email",
  *         },
  *         {
  *           text: "Favourites",
- *           icon: "k-i-star-outline",
+ *           icon: "star-outline",
  *         },
  *       ],
  *       expanded: true,

package/dist/es/drawer/DrawerContent.js

@@ -63,20 +63,20 @@ var DrawerContentVue2 = {
  *       items: [
  *         {
  *           text: "Inbox",
- *           icon: "k-i-inbox",
+ *           icon: "inbox",
  *           selected: true,
  *         },
  *         {
  *           text: "Calendar",
- *           icon: "k-i-calendar",
+ *           icon: "calendar",
  *         },
  *         {
  *           text: "Attachments",
- *           icon: "k-i-hyperlink-email",
+ *           icon: "hyperlink-email",
  *         },
  *         {
  *           text: "Favourites",
- *           icon: "k-i-star-outline",
+ *           icon: "star-outline",
  *         },
  *       ],
  *       expanded: true,

package/dist/es/drawer/DrawerItem.js

@@ -15,7 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTabIndex, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
+import { getTabIndex, getDefaultSlots, Icon, getIconName } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { separatorAriaMessage, messages } from '../messages/main';
 /**
@@ -31,6 +31,7 @@ var DrawerItemVue2 = {
     index: Number,
     text: String,
     icon: String,
+    svgIcon: Object,
     separator: Boolean,
     selected: Boolean,
     disabled: Boolean,
@@ -70,6 +71,7 @@ var DrawerItemVue2 = {
     var _a = this.$props,
       text = _a.text,
       icon = _a.icon,
+      svgIcon = _a.svgIcon,
       separator = _a.separator,
       disabled = _a.disabled,
       selected = _a.selected,
@@ -79,7 +81,6 @@ var DrawerItemVue2 = {
       mini = _b.mini,
       item = _b.item;
     var ariaLabelSeparator = provideLocalizationService(this).toLanguageString(separatorAriaMessage, messages[separatorAriaMessage]);
-    var iconName = icon && icon.indexOf('k-i-') !== -1 ? icon.split('k-i-')[1] : icon;
     return separator ? h("li", {
       "class": 'k-drawer-item k-drawer-separator',
       role: "separator",
@@ -106,11 +107,13 @@ var DrawerItemVue2 = {
         "click": this.handleClick
       },
       tabindex: getTabIndex(tabIndex, disabled)
-    }, [!item ? [icon && h(Icon, {
-      name: iconName,
+    }, [!item ? [(icon || svgIcon) && h(Icon, {
+      name: getIconName(icon),
       attrs: this.v3 ? undefined : {
-        name: iconName
-      }
+        name: getIconName(icon),
+        icon: svgIcon
+      },
+      icon: svgIcon
     }), !expanded && mini ? null : h("span", {
       "class": 'k-item-text'
     }, [text])] : defaultSlot]);

package/dist/es/drawer/interfaces/DrawerItemProps.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * An interface for the Drawer items.
  */
@@ -11,6 +12,10 @@ export interface DrawerItemProps {
      * The icon is rendered inside the Drawer item by a `span.k-icon` element.
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the Drawer item.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies if the Drawer item is initially selected.
      */

package/dist/es/expansionpanel/ExpansionPanel.js

@@ -3,7 +3,8 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
+import { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate, Icon, getIconName } from '@progress/kendo-vue-common';
+import { chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -19,7 +20,9 @@ var ExpansionPanelVue2 = {
     titleRender: [String, Object, Function],
     subtitleRender: [String, Object, Function],
     expandIcon: String,
+    expandSvgIcon: Object,
     collapseIcon: String,
+    collapseSvgIcon: Object,
     expanded: Boolean,
     disabled: Boolean
   },
@@ -43,15 +46,14 @@ var ExpansionPanelVue2 = {
         expanded = _a.expanded,
         expandIcon = _a.expandIcon,
         collapseIcon = _a.collapseIcon;
-      return !expanded && !expandIcon ? 'chevron-down' : expanded && !collapseIcon ? 'chevron-up' : '';
+      return expanded ? expandIcon ? getIconName(expandIcon) : 'chevron-up' : collapseIcon ? getIconName(collapseIcon) : 'chevron-down';
     },
-    expandIconClass: function expandIconClass() {
-      var _a;
-      var _b = this.$props,
-        expanded = _b.expanded,
-        expandIcon = _b.expandIcon,
-        collapseIcon = _b.collapseIcon;
-      return _a = {}, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
+    expandSVGIcon: function expandSVGIcon() {
+      var _a = this.$props,
+        expanded = _a.expanded,
+        expandSvgIcon = _a.expandSvgIcon,
+        collapseSvgIcon = _a.collapseSvgIcon;
+      return expanded ? expandSvgIcon || chevronUpIcon : collapseSvgIcon || chevronDownIcon;
     }
   },
   data: function data() {
@@ -138,9 +140,10 @@ var ExpansionPanelVue2 = {
     }, [h(Icon, {
       name: this.expandIconName,
       attrs: this.v3 ? undefined : {
-        name: this.expandIconName
+        name: this.expandIconName,
+        icon: this.expandSVGIcon
       },
-      "class": this.expandIconClass
+      icon: this.expandSVGIcon
     })])]), defaultSlots]);
   },
   methods: {

package/dist/es/expansionpanel/interfaces.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * The ExpansionPanel ref.
  */
@@ -48,10 +49,18 @@ export interface ExpansionPanelProps {
      * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
      */
     expandIcon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the expand arrow.
+     */
+    expandSvgIcon?: SVGIcon;
     /**
      * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
      */
     collapseIcon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the collapse arrow.
+     */
+    collapseSvgIcon?: SVGIcon;
     /**
      * Sets the `dir` property of the ExpansionPanel.
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1684762696,
+    publishDate: 1684827726,
     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/panelbar/PanelBarItem.js

@@ -47,6 +47,7 @@ var PanelBarItemVue2 = {
     iconClass: String,
     imageUrl: String,
     icon: String,
+    svgIcon: Object,
     content: Object,
     header: Object
   },
@@ -70,6 +71,7 @@ var PanelBarItemVue2 = {
       id = _b.id,
       item = _b.item,
       icon = _b.icon,
+      svgIcon = _b.svgIcon,
       items = _b.items,
       content = _b.content,
       title = _b.title,
@@ -108,13 +110,15 @@ var PanelBarItemVue2 = {
           "class": 'k-panelbar-item-icon k-image',
           src: this.imageUrl
         });
-      } else if (icon) {
+      } else if (icon || svgIcon) {
         return h(Icon, {
           name: icon,
           attrs: this.v3 ? undefined : {
-            name: icon
+            name: icon,
+            icon: svgIcon
           },
-          "class": 'k-panelbar-item-icon'
+          "class": 'k-panelbar-item-icon',
+          icon: svgIcon
         });
       } else if (this.iconClass) {
         return h(Icon, {

package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * Represents the props of the PanelBarItem component.
  */
@@ -30,6 +31,10 @@ export interface PanelBarItemProps {
      * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered next to the title.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */

package/dist/es/panelbar/interfaces/PanelBarItemProps.js

@@ -1 +1,2 @@
+/* eslint-disable max-len */
 export {};

package/dist/es/splitter/Splitter.js

@@ -17,7 +17,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { SplitterPane } from './SplitterPane';
 import { SplitterBar } from './SplitterBar';
-import { classNames, getListeners, templateRendering } from '@progress/kendo-vue-common';
+import { classNames, getListeners, isRtl, templateRendering } from '@progress/kendo-vue-common';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
@@ -49,6 +49,9 @@ var SplitterVue2 = {
     panes: Array,
     defaultPanes: Array
   },
+  mounted: function mounted() {
+    this.currentRtl = isRtl(this.$el);
+  },
   // @ts-ignore
   emits: {
     change: null
@@ -61,9 +64,6 @@ var SplitterVue2 = {
       // return this.panesDuringOnChange !== undefined ?
       //     this.panesDuringOnChange :
       return this.isControlledState ? this.$props.panes : this.currentPanes;
-    },
-    isRtl: function isRtl() {
-      return this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
     }
   },
   created: function created() {
@@ -73,6 +73,7 @@ var SplitterVue2 = {
 
   data: function data() {
     return {
+      currentRtl: false,
       isDragging: false,
       dragIndex: undefined,
       startTime: 0,
@@ -111,7 +112,8 @@ var SplitterVue2 = {
               index: index,
               orientation: this.orientation,
               prev: pane,
-              next: next
+              next: next,
+              isRtl: this.currentRtl
             },
             orientation: this.orientation,
             prev: pane,
@@ -123,7 +125,8 @@ var SplitterVue2 = {
               "keyboardresize": this.onBarKeyboardResize
             },
             onToggle: this.onBarToggle,
-            onKeyboardresize: this.onBarKeyboardResize
+            onKeyboardresize: this.onBarKeyboardResize,
+            isRtl: this.currentRtl
           });
         }
         var splitterPane = h(SplitterPane, {
@@ -235,7 +238,7 @@ var SplitterVue2 = {
       var delta;
       if (this.orientation === 'vertical') {
         delta = pageY - originalY;
-      } else if (this.isRtl) {
+      } else if (this.currentRtl) {
         delta = originalX - pageX;
       } else {
         delta = pageX - originalX;

package/dist/es/splitter/SplitterBar.d.ts

@@ -12,9 +12,7 @@ export interface SplitterBarProps {
     index: number;
     prev: SplitterPaneExtendedProps;
     next: SplitterPaneExtendedProps;
-    onDrag?: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
-    onToggle?: (index: number, nativeEvent: any) => void;
-    onKeyboardResize?: (element: HTMLDivElement, index: number, delta: number, nativeEvent: any) => void;
+    isRtl?: boolean;
 }
 /**
  * @hidden

package/dist/es/splitter/SplitterBar.js

@@ -28,7 +28,8 @@ var SplitterBarVue2 = {
     },
     index: Number,
     prev: Object,
-    next: Object
+    next: Object,
+    isRtl: Boolean
   },
   created: function created() {
     this.draggable = null;
@@ -151,9 +152,11 @@ var SplitterBarVue2 = {
           name: previousArrowName,
           attrs: _this2.v3 ? undefined : {
             name: previousArrowName,
-            icon: previousArrowSVG
+            icon: previousArrowSVG,
+            size: 'xsmall'
           },
-          icon: previousArrowSVG
+          icon: previousArrowSVG,
+          size: 'xsmall'
         })]), h("div", {
           "class": 'k-resize-handle'
         }), _this2.next.collapsible && h("span", {
@@ -166,9 +169,11 @@ var SplitterBarVue2 = {
           name: nextArrowName,
           attrs: _this2.v3 ? undefined : {
             name: nextArrowName,
-            icon: nextArrowSVG
+            icon: nextArrowSVG,
+            size: 'xsmall'
           },
-          icon: nextArrowSVG
+          icon: nextArrowSVG,
+          size: 'xsmall'
         })])])];
       } : [h("div", {
         tabindex: isStatic ? -1 : 0,
@@ -205,9 +210,11 @@ var SplitterBarVue2 = {
         name: previousArrowName,
         attrs: _this2.v3 ? undefined : {
           name: previousArrowName,
-          icon: previousArrowSVG
+          icon: previousArrowSVG,
+          size: 'xsmall'
         },
-        icon: previousArrowSVG
+        icon: previousArrowSVG,
+        size: 'xsmall'
       })]), h("div", {
         "class": 'k-resize-handle'
       }), _this2.next.collapsible && h("span", {
@@ -220,9 +227,11 @@ var SplitterBarVue2 = {
         name: nextArrowName,
         attrs: _this2.v3 ? undefined : {
           name: nextArrowName,
-          icon: nextArrowSVG
+          icon: nextArrowSVG,
+          size: 'xsmall'
         },
-        icon: nextArrowSVG
+        icon: nextArrowSVG,
+        size: 'xsmall'
       })])])])
     );
   },
@@ -300,22 +309,22 @@ var SplitterBarVue2 = {
     previousArrowName: function previousArrowName(isHorizontal) {
       var prev = this.$props.prev;
       var isCollapsed = prev.collapsed;
-      return isHorizontal && !isCollapsed ? 'caret-alt-left' : isHorizontal && isCollapsed ? 'caret-alt-right' : !isHorizontal && !isCollapsed ? 'caret-alt-up' : !isHorizontal && isCollapsed ? 'caret-alt-down' : '';
+      return isHorizontal && !isCollapsed ? this.isRtl ? 'caret-alt-right' : 'caret-alt-left' : isHorizontal && isCollapsed ? this.isRtl ? 'caret-alt-left' : 'caret-alt-right' : !isHorizontal && !isCollapsed ? 'caret-alt-up' : !isHorizontal && isCollapsed ? 'caret-alt-down' : '';
     },
     previousArrowSVG: function previousArrowSVG(isHorizontal) {
       var prev = this.$props.prev;
       var isCollapsed = prev.collapsed;
-      return isHorizontal && !isCollapsed ? caretAltLeftIcon : isHorizontal && isCollapsed ? caretAltRightIcon : !isHorizontal && !isCollapsed ? caretAltUpIcon : !isHorizontal && isCollapsed ? caretAltDownIcon : undefined;
+      return isHorizontal && !isCollapsed ? this.isRtl ? caretAltRightIcon : caretAltLeftIcon : isHorizontal && isCollapsed ? this.isRtl ? caretAltLeftIcon : caretAltRightIcon : !isHorizontal && !isCollapsed ? caretAltUpIcon : !isHorizontal && isCollapsed ? caretAltDownIcon : undefined;
     },
     nextArrowName: function nextArrowName(isHorizontal) {
       var next = this.$props.next;
       var isCollapsed = next.collapsed;
-      return isHorizontal && !isCollapsed ? 'caret-alt-right' : isHorizontal && isCollapsed ? 'caret-alt-left' : !isHorizontal && !isCollapsed ? 'caret-alt-down' : !isHorizontal && isCollapsed ? 'caret-alt-up' : '';
+      return isHorizontal && !isCollapsed ? this.isRtl ? 'caret-alt-left' : 'caret-alt-right' : isHorizontal && isCollapsed ? this.isRtl ? 'caret-alt-right' : 'caret-alt-left' : !isHorizontal && !isCollapsed ? 'caret-alt-down' : !isHorizontal && isCollapsed ? 'caret-alt-up' : '';
     },
     nextArrowSVG: function nextArrowSVG(isHorizontal) {
       var next = this.$props.next;
       var isCollapsed = next.collapsed;
-      return isHorizontal && !isCollapsed ? caretAltRightIcon : isHorizontal && isCollapsed ? caretAltLeftIcon : !isHorizontal && !isCollapsed ? caretAltDownIcon : !isHorizontal && isCollapsed ? caretAltUpIcon : undefined;
+      return isHorizontal && !isCollapsed ? this.isRtl ? caretAltLeftIcon : caretAltRightIcon : isHorizontal && isCollapsed ? this.isRtl ? caretAltRightIcon : caretAltLeftIcon : !isHorizontal && !isCollapsed ? caretAltDownIcon : !isHorizontal && isCollapsed ? caretAltUpIcon : undefined;
     }
   }
 };

package/dist/es/stepper/Step.js

@@ -4,8 +4,9 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
-import { focusFirstFocusableChild, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
+import { focusFirstFocusableChild, getDefaultSlots, getIconName, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { exclamationCircleIcon, checkOutlineIcon } from '@progress/kendo-svg-icons';
 import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
 import { messages, optionalText } from './messages/main';
 /**
@@ -17,8 +18,12 @@ var StepVue2 = {
     current: Boolean,
     disabled: Boolean,
     icon: String,
+    svgIcon: Object,
     index: Number,
-    isValid: Boolean,
+    isValid: {
+      type: Boolean,
+      default: undefined
+    },
     focused: Boolean,
     label: String,
     optional: Boolean,
@@ -35,7 +40,9 @@ var StepVue2 = {
     numOfSteps: Number,
     value: Number,
     successIcon: String,
-    errorIcon: String
+    successSvgIcon: Object,
+    errorIcon: String,
+    errorSvgIcon: Object
   },
   inject: {
     kendoLocalizationService: {
@@ -99,6 +106,7 @@ var StepVue2 = {
       disabled = _a.disabled,
       focused = _a.focused,
       icon = _a.icon,
+      svgIcon = _a.svgIcon,
       index = _a.index,
       isValid = _a.isValid,
       label = _a.label,
@@ -111,22 +119,29 @@ var StepVue2 = {
       mode = _a.mode,
       value = _a.value,
       successIcon = _a.successIcon,
-      errorIcon = _a.errorIcon;
+      successSvgIcon = _a.successSvgIcon,
+      errorIcon = _a.errorIcon,
+      errorSvgIcon = _a.errorSvgIcon;
     var allowClick = !linear || index === value - 1 || index === value || index === value + 1;
-    var isInLabel = mode === 'labels' || Boolean(icon) && Boolean(label);
+    var isInLabel = mode === 'labels' || (Boolean(icon) || Boolean(svgIcon)) && Boolean(label);
     var localizationService = provideLocalizationService(this);
     var localizeMessage = function localizeMessage(message) {
       return localizationService.toLanguageString(message, messages[message]);
     };
     var optionalMessage = localizeMessage(optionalText);
     var progressAnimation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? DEFAULT_ANIMATION_DURATION : NO_ANIMATION;
-    var validationIconClasses = isValid ? successIcon ? "".concat(successIcon) : 'k-icon k-i-check-circle' : errorIcon ? "".concat(errorIcon) : 'k-icon k-i-exclamation-circle';
+    var validationIconNames = isValid ? successIcon || 'check-circle' : errorIcon || 'exclamation-circle';
+    var validationSvgIcon = isValid ? successSvgIcon || checkOutlineIcon : errorSvgIcon || exclamationCircleIcon;
     var validationIcons = h(Icon, {
-      "class": 'k-step-indicator-icon ' + validationIconClasses,
-      "aria-hidden": "true",
+      "class": 'k-step-indicator-icon',
+      name: getIconName(validationIconNames),
       attrs: this.v3 ? undefined : {
+        name: getIconName(validationIconNames),
+        icon: validationSvgIcon,
         "aria-hidden": "true"
-      }
+      },
+      icon: validationSvgIcon,
+      "aria-hidden": "true"
     });
     var stepIndicator = function stepIndicator() {
       return mode !== 'labels' ? h("span", {
@@ -138,8 +153,14 @@ var StepVue2 = {
         style: {
           transitionDuration: progressAnimation + 'ms'
         }
-      }, [icon ? !isInLabel && isValid !== undefined ? validationIcons : h("span", {
-        "class": "k-step-indicator-icon k-icon ".concat(icon)
+      }, [icon || svgIcon ? !isInLabel && isValid !== undefined ? validationIcons : h(Icon, {
+        "class": "k-step-indicator-icon",
+        name: icon,
+        attrs: this.v3 ? undefined : {
+          name: icon,
+          icon: svgIcon
+        },
+        icon: svgIcon
       }) : isValid !== undefined ? validationIcons : h("span", {
         "class": "k-step-indicator-text"
       }, [text ? text : index + 1])]) : null;

package/dist/es/stepper/Stepper.d.ts

@@ -61,24 +61,24 @@ declare let StepperVue2: ComponentOptions<StepperAll, DefaultData<StepperData>,
  *         items: [
  *           {
  *             label: "Cart",
- *             icon: "k-i-cart",
+ *             icon: "cart",
  *           },
  *           {
  *             label: "Delivery Address",
- *             icon: "k-i-marker-pin-target",
+ *             icon: "marker-pin-target",
  *           },
  *           {
  *             label: "Payment Method",
- *             icon: "k-i-dollar",
+ *             icon: "dollar",
  *           },
  *           {
  *             label: "Preview",
- *             icon: "k-i-preview",
+ *             icon: "preview",
  *             optional: true,
  *           },
  *           {
  *             label: "Finish Order",
- *             icon: "k-i-track-changes-accept",
+ *             icon: "track-changes-accept",
  *           },
  *         ]
  *       }

package/dist/es/stepper/Stepper.js

@@ -411,24 +411,24 @@ var StepperVue2 = {
  *         items: [
  *           {
  *             label: "Cart",
- *             icon: "k-i-cart",
+ *             icon: "cart",
  *           },
  *           {
  *             label: "Delivery Address",
- *             icon: "k-i-marker-pin-target",
+ *             icon: "marker-pin-target",
  *           },
  *           {
  *             label: "Payment Method",
- *             icon: "k-i-dollar",
+ *             icon: "dollar",
  *           },
  *           {
  *             label: "Preview",
- *             icon: "k-i-preview",
+ *             icon: "preview",
  *             optional: true,
  *           },
  *           {
  *             label: "Finish Order",
- *             icon: "k-i-track-changes-accept",
+ *             icon: "track-changes-accept",
  *           },
  *         ]
  *       }