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

package/dist/esm/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",
  *           },
  *         ]
  *       }

package/dist/esm/stepper/interfaces/StepProps.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * Represents the props of the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
  */
@@ -31,6 +32,26 @@ export interface StepProps {
      * ([see example]({% slug display_modes_stepper %})).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the Step.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines the name for an success icon in a Kendo UI for Vue theme.
+     */
+    successIcon: String;
+    /**
+     * Defines an success SVGIcon to be rendered within the Step.
+     */
+    successSvgIcon: Object;
+    /**
+     * Defines the name for an error icon in a Kendo UI for Vue theme.
+     */
+    errorIcon: String;
+    /**
+     * Defines an error SVGIcon to be rendered within the Step.
+     */
+    errorSvgIcon: Object;
     /**
      * Sets the index of the Step that is used to identify it.
      */

package/dist/npm/bottomnavigation/BottomNavigation.js

@@ -39,6 +39,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: {
@@ -71,11 +78,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[utils_1.POSITION_MODE_CLASSES[positionMode]] = true, _a[utils_1.THEME_COLOR_CLASSES[themeColor]] = true, _a[utils_1.FILL_CLASSES[fill]] = true, _a[utils_1.ITEM_FLOW_CLASSES[itemFlow]] = true, _a['k-bottom-nav-border'] = border, _a['k-disabled'] = disabled, _a;

package/dist/npm/bottomnavigation/BottomNavigationItem.js

@@ -69,7 +69,8 @@ var BottomNavigationItemVue2 = {
       index = _a.index,
       tabIndex = _a.tabIndex;
     var icon = dataItem.icon,
-      text = dataItem.text;
+      text = dataItem.text,
+      svgIcon = dataItem.svgIcon;
     var content = kendo_vue_common_1.getTemplate.call(this, {
       h: h,
       template: item,
@@ -102,8 +103,12 @@ var BottomNavigationItemVue2 = {
     }, [this.$props.item ? content : [icon && h(kendo_vue_common_1.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/npm/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/npm/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/npm/drawer/DrawerContent.js

@@ -70,20 +70,20 @@ exports.DrawerContentVue2 = 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/npm/drawer/DrawerItem.js

@@ -37,6 +37,7 @@ var DrawerItemVue2 = {
     index: Number,
     text: String,
     icon: String,
+    svgIcon: Object,
     separator: Boolean,
     selected: Boolean,
     disabled: Boolean,
@@ -76,6 +77,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,
@@ -85,7 +87,6 @@ var DrawerItemVue2 = {
       mini = _b.mini,
       item = _b.item;
     var ariaLabelSeparator = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.separatorAriaMessage, main_1.messages[main_1.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",
@@ -112,11 +113,13 @@ var DrawerItemVue2 = {
         "click": this.handleClick
       },
       tabindex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled)
-    }, [!item ? [icon && h(kendo_vue_common_1.Icon, {
-      name: iconName,
+    }, [!item ? [(icon || svgIcon) && h(kendo_vue_common_1.Icon, {
+      name: (0, kendo_vue_common_1.getIconName)(icon),
       attrs: this.v3 ? undefined : {
-        name: iconName
-      }
+        name: (0, kendo_vue_common_1.getIconName)(icon),
+        icon: svgIcon
+      },
+      icon: svgIcon
     }), !expanded && mini ? null : h("span", {
       "class": 'k-item-text'
     }, [text])] : defaultSlot]);

package/dist/npm/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/npm/expansionpanel/ExpansionPanel.js

@@ -10,6 +10,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var package_metadata_1 = require("../package-metadata");
 /**
  * @hidden
@@ -25,7 +26,9 @@ var ExpansionPanelVue2 = {
     titleRender: [String, Object, Function],
     subtitleRender: [String, Object, Function],
     expandIcon: String,
+    expandSvgIcon: Object,
     collapseIcon: String,
+    collapseSvgIcon: Object,
     expanded: Boolean,
     disabled: Boolean
   },
@@ -49,15 +52,14 @@ var ExpansionPanelVue2 = {
         expanded = _a.expanded,
         expandIcon = _a.expandIcon,
         collapseIcon = _a.collapseIcon;
-      return !expanded && !expandIcon ? 'chevron-down' : expanded && !collapseIcon ? 'chevron-up' : '';
+      return expanded ? expandIcon ? (0, kendo_vue_common_1.getIconName)(expandIcon) : 'chevron-up' : collapseIcon ? (0, kendo_vue_common_1.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 || kendo_svg_icons_1.chevronUpIcon : collapseSvgIcon || kendo_svg_icons_1.chevronDownIcon;
     }
   },
   data: function data() {
@@ -144,9 +146,10 @@ var ExpansionPanelVue2 = {
     }, [h(kendo_vue_common_1.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/npm/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/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.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/npm/panelbar/PanelBarItem.js

@@ -53,6 +53,7 @@ var PanelBarItemVue2 = {
     iconClass: String,
     imageUrl: String,
     icon: String,
+    svgIcon: Object,
     content: Object,
     header: Object
   },
@@ -76,6 +77,7 @@ var PanelBarItemVue2 = {
       id = _b.id,
       item = _b.item,
       icon = _b.icon,
+      svgIcon = _b.svgIcon,
       items = _b.items,
       content = _b.content,
       title = _b.title,
@@ -114,13 +116,15 @@ var PanelBarItemVue2 = {
           "class": 'k-panelbar-item-icon k-image',
           src: this.imageUrl
         });
-      } else if (icon) {
+      } else if (icon || svgIcon) {
         return h(kendo_vue_common_1.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(kendo_vue_common_1.Icon, {

package/dist/npm/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/npm/panelbar/interfaces/PanelBarItemProps.js

@@ -1,2 +1,3 @@
 "use strict";
+/* eslint-disable max-len */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/splitter/Splitter.js

@@ -55,6 +55,9 @@ var SplitterVue2 = {
     panes: Array,
     defaultPanes: Array
   },
+  mounted: function mounted() {
+    this.currentRtl = (0, kendo_vue_common_1.isRtl)(this.$el);
+  },
   // @ts-ignore
   emits: {
     change: null
@@ -67,9 +70,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() {
@@ -79,6 +79,7 @@ var SplitterVue2 = {
 
   data: function data() {
     return {
+      currentRtl: false,
       isDragging: false,
       dragIndex: undefined,
       startTime: 0,
@@ -117,7 +118,8 @@ var SplitterVue2 = {
               index: index,
               orientation: this.orientation,
               prev: pane,
-              next: next
+              next: next,
+              isRtl: this.currentRtl
             },
             orientation: this.orientation,
             prev: pane,
@@ -129,7 +131,8 @@ var SplitterVue2 = {
               "keyboardresize": this.onBarKeyboardResize
             },
             onToggle: this.onBarToggle,
-            onKeyboardresize: this.onBarKeyboardResize
+            onKeyboardresize: this.onBarKeyboardResize,
+            isRtl: this.currentRtl
           });
         }
         var splitterPane = h(SplitterPane_1.SplitterPane, {
@@ -241,7 +244,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/npm/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/npm/splitter/SplitterBar.js

@@ -34,7 +34,8 @@ var SplitterBarVue2 = {
     },
     index: Number,
     prev: Object,
-    next: Object
+    next: Object,
+    isRtl: Boolean
   },
   created: function created() {
     this.draggable = null;
@@ -157,9 +158,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", {
@@ -172,9 +175,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,
@@ -211,9 +216,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", {
@@ -226,9 +233,11 @@ var SplitterBarVue2 = {
         name: nextArrowName,
         attrs: _this2.v3 ? undefined : {
           name: nextArrowName,
-          icon: nextArrowSVG
+          icon: nextArrowSVG,
+          size: 'xsmall'
         },
-        icon: nextArrowSVG
+        icon: nextArrowSVG,
+        size: 'xsmall'
       })])])])
     );
   },
@@ -306,22 +315,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 ? kendo_svg_icons_1.caretAltLeftIcon : isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltRightIcon : !isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltUpIcon : !isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltDownIcon : undefined;
+      return isHorizontal && !isCollapsed ? this.isRtl ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon : isHorizontal && isCollapsed ? this.isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon : !isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltUpIcon : !isHorizontal && isCollapsed ? kendo_svg_icons_1.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 ? kendo_svg_icons_1.caretAltRightIcon : isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltLeftIcon : !isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltDownIcon : !isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltUpIcon : undefined;
+      return isHorizontal && !isCollapsed ? this.isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon : isHorizontal && isCollapsed ? this.isRtl ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon : !isHorizontal && !isCollapsed ? kendo_svg_icons_1.caretAltDownIcon : !isHorizontal && isCollapsed ? kendo_svg_icons_1.caretAltUpIcon : undefined;
     }
   }
 };

package/dist/npm/stepper/Step.js

@@ -12,6 +12,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var contants_1 = require("./contants");
 var main_1 = require("./messages/main");
 /**
@@ -23,8 +24,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,
@@ -41,7 +46,9 @@ var StepVue2 = {
     numOfSteps: Number,
     value: Number,
     successIcon: String,
-    errorIcon: String
+    successSvgIcon: Object,
+    errorIcon: String,
+    errorSvgIcon: Object
   },
   inject: {
     kendoLocalizationService: {
@@ -105,6 +112,7 @@ var StepVue2 = {
       disabled = _a.disabled,
       focused = _a.focused,
       icon = _a.icon,
+      svgIcon = _a.svgIcon,
       index = _a.index,
       isValid = _a.isValid,
       label = _a.label,
@@ -117,22 +125,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 = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var localizeMessage = function localizeMessage(message) {
       return localizationService.toLanguageString(message, main_1.messages[message]);
     };
     var optionalMessage = localizeMessage(main_1.optionalText);
     var progressAnimation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? contants_1.DEFAULT_ANIMATION_DURATION : contants_1.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 || kendo_svg_icons_1.checkOutlineIcon : errorSvgIcon || kendo_svg_icons_1.exclamationCircleIcon;
     var validationIcons = h(kendo_vue_common_1.Icon, {
-      "class": 'k-step-indicator-icon ' + validationIconClasses,
-      "aria-hidden": "true",
+      "class": 'k-step-indicator-icon',
+      name: (0, kendo_vue_common_1.getIconName)(validationIconNames),
       attrs: this.v3 ? undefined : {
+        name: (0, kendo_vue_common_1.getIconName)(validationIconNames),
+        icon: validationSvgIcon,
         "aria-hidden": "true"
-      }
+      },
+      icon: validationSvgIcon,
+      "aria-hidden": "true"
     });
     var stepIndicator = function stepIndicator() {
       return mode !== 'labels' ? h("span", {
@@ -144,8 +159,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(kendo_vue_common_1.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/npm/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",
  *           },
  *         ]
  *       }