@progress/kendo-vue-layout 3.7.4-dev.202212020747 → 3.7.4-dev.202212300853

package/dist/es/bottomnavigation/BottomNavigationItem.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { packageMetadata } from '../package-metadata';
-import { getTemplate, validatePackage } from '@progress/kendo-vue-common';
+import { getTemplate, Icon, validatePackage } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -93,8 +93,12 @@ var BottomNavigationItemVue2 = {
       onKeydown: this.handleKeyDown,
       "aria-selected": selected,
       "aria-disabled": disabled
-    }, [this.$props.item ? content : [icon && h("span", {
-      "class": "k-bottom-nav-item-icon k-icon k-i-".concat(icon)
+    }, [this.$props.item ? content : [icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon
+      },
+      "class": "k-bottom-nav-item-icon"
     }), text && h("span", {
       "class": 'k-bottom-nav-item-text',
       style: {

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 } from '@progress/kendo-vue-common';
+import { getTabIndex, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -95,8 +95,11 @@ var DrawerItemVue2 = {
         "click": this.handleClick
       },
       tabindex: getTabIndex(tabIndex, disabled)
-    }, [!item ? [icon && h("span", {
-      "class": 'k-icon ' + icon
+    }, [!item ? [icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon
+      }
     }), !expanded && mini ? null : h("span", {
       "class": 'k-item-text'
     }, [text])] : defaultSlot]);

package/dist/es/expansionpanel/ExpansionPanel.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 { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -38,17 +38,20 @@ var ExpansionPanelVue2 = {
         'k-disabled': disabled
       };
     },
+    expandIconName: function expandIconName() {
+      var _a = this.$props,
+        expanded = _a.expanded,
+        expandIcon = _a.expandIcon,
+        collapseIcon = _a.collapseIcon;
+      return !expanded && !expandIcon ? 'chevron-down' : expanded && !collapseIcon ? 'chevron-up' : '';
+    },
     expandIconClass: function expandIconClass() {
       var _a;
       var _b = this.$props,
         expanded = _b.expanded,
         expandIcon = _b.expandIcon,
         collapseIcon = _b.collapseIcon;
-      return _a = {
-        'k-icon': true,
-        'k-i-chevron-down': !expanded && !expandIcon,
-        'k-i-chevron-up': expanded && !collapseIcon
-      }, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
+      return _a = {}, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
     }
   },
   data: function data() {
@@ -132,7 +135,11 @@ var ExpansionPanelVue2 = {
       "class": "k-spacer"
     }), subtitleToRender, h("span", {
       "class": "k-expander-indicator"
-    }, [h("span", {
+    }, [h(Icon, {
+      name: this.expandIconName,
+      attrs: this.v3 ? undefined : {
+        name: this.expandIconName
+      },
       "class": this.expandIconClass
     })])]), defaultSlots]);
   },

package/dist/es/menu/components/MenuItemArrow.d.ts

@@ -23,15 +23,15 @@ export interface MenuItemArrowProps {
 /**
  * @hidden
  */
-export declare const downArrowClass = "k-i-caret-alt-down";
+export declare const downArrowClass = "caret-alt-down";
 /**
  * @hidden
  */
-export declare const rightArrowClass = "k-i-caret-alt-right";
+export declare const rightArrowClass = "caret-alt-right";
 /**
  * @hidden
  */
-export declare const leftArrowClass = "k-i-caret-alt-left";
+export declare const leftArrowClass = "caret-alt-left";
 /**
  * @hidden
  */

package/dist/es/menu/components/MenuItemArrow.js

@@ -3,19 +3,20 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { Icon } from '@progress/kendo-vue-common';
 import { getChildrenPosition } from '../utils/misc';
 /**
  * @hidden
  */
-export var downArrowClass = 'k-i-caret-alt-down';
+export var downArrowClass = 'caret-alt-down';
 /**
  * @hidden
  */
-export var rightArrowClass = 'k-i-caret-alt-right';
+export var rightArrowClass = 'caret-alt-right';
 /**
  * @hidden
  */
-export var leftArrowClass = 'k-i-caret-alt-left';
+export var leftArrowClass = 'caret-alt-left';
 /**
  * @hidden
  */
@@ -37,21 +38,17 @@ var MenuItemArrowVue2 = {
     var h = gh || createElement;
     return h("span", {
       "class": "k-menu-expand-arrow"
-    }, [h("span", {
-      "class": this.getArrowClassName(),
-      role: "presentation",
+    }, [h(Icon, {
+      name: this.getArrowName(),
       attrs: this.v3 ? undefined : {
-        role: "presentation"
+        name: this.getArrowName()
       }
     })]);
   },
   methods: {
-    getArrowClassName: function getArrowClassName() {
-      var _a;
+    getArrowName: function getArrowName() {
       var childrenPosition = getChildrenPosition(this.$props.itemId, this.$props.verticalMenu === true, this.$props.dir === 'rtl');
-      return _a = {
-        'k-icon': true
-      }, _a[downArrowClass] = childrenPosition === 'downward', _a[rightArrowClass] = childrenPosition === 'rightward', _a[leftArrowClass] = childrenPosition === 'leftward', _a;
+      return childrenPosition === 'downward' ? downArrowClass : childrenPosition === 'rightward' ? rightArrowClass : childrenPosition === 'leftward' ? leftArrowClass : '';
     }
   }
 };

package/dist/es/menu/components/MenuItemInternal.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, getTemplate, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, guid, getTemplate, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils';
 import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc';
@@ -157,11 +157,10 @@ var MenuItemInternalVue2 = {
       })]);
     };
     var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
-      return this.$props.item.icon ? h("span", {
-        "class": "k-icon k-i-".concat(this.$props.item.icon),
-        role: "presentation",
+      return this.$props.item.icon ? h(Icon, {
+        name: this.$props.item.icon,
         attrs: this.v3 ? undefined : {
-          role: "presentation"
+          name: this.$props.item.icon
         },
         key: "0"
       }) : null;

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: 1669966527,
+    publishDate: 1672389706,
     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

@@ -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 { classNames, getTemplate } from '@progress/kendo-vue-common';
+import { classNames, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { PanelBarGroup } from './PanelBarGroup';
 /**
  * @hidden
@@ -93,7 +93,8 @@ var PanelBarItemVue2 = {
       'k-selected': !disabled && selected,
       'k-focus': focused
     }, headerClassName);
-    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {}, _a['k-i-chevron-up'] = expanded && hasContent, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-i-chevron-down'] = !expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
+    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', (_a = {}, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
+    var itemIconName = expanded ? 'chevron-up' : 'chevron-down';
     var iconElement = function iconElement() {
       if (this.imageUrl) {
         return h("img", {
@@ -106,27 +107,26 @@ var PanelBarItemVue2 = {
           src: this.imageUrl
         });
       } else if (icon) {
-        var iconClasses = classNames('k-panelbar-item-icon', 'k-icon', 'k-i-' + icon);
-        return h("span", {
-          role: "presentation",
+        return h(Icon, {
+          name: icon,
           attrs: this.v3 ? undefined : {
-            role: "presentation"
+            name: icon
           },
-          "class": iconClasses
+          "class": 'k-panelbar-item-icon'
         });
       } else if (this.iconClass) {
-        return h("span", {
-          role: "presentation",
-          attrs: this.v3 ? undefined : {
-            role: "presentation"
-          },
+        return h(Icon, {
           "class": 'k-panelbar-item-icon ' + this.iconClass
         });
       }
       return null;
     };
     var iconRender = iconElement.call(this);
-    var arrow = !disabled && (items || content) ? h("span", {
+    var arrow = !disabled && (items || content) ? h(Icon, {
+      name: itemIconName,
+      attrs: this.v3 ? undefined : {
+        name: itemIconName
+      },
       "class": panelBarItemArrowClassName
     }) : null;
     var group = items || content ? h(PanelBarGroup, {

package/dist/es/splitter/SplitterBar.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, Draggable, Keys } from '@progress/kendo-vue-common';
+import { classNames, Draggable, Icon, Keys } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -78,8 +78,8 @@ var SplitterBarVue2 = {
     var isStatic = this.isStatic;
     var isHorizontal = this.isHorizontal;
     var barClasses = classNames('k-splitbar', (_a = {}, _a['k-focus'] = this.focused, _a['k-splitbar-horizontal'] = isHorizontal, _a['k-splitbar-vertical'] = !isHorizontal, _a['k-splitbar-draggable-horizontal'] = isHorizontal && isDraggable, _a['k-splitbar-draggable-vertical'] = !isHorizontal && isDraggable, _a['k-splitbar-static-horizontal'] = isHorizontal && isStatic, _a['k-splitbar-static-vertical'] = !isHorizontal && isStatic, _a));
-    var previousArrowClass = this.previousArrowClass(isHorizontal);
-    var nextArrowClass = this.nextArrowClass(isHorizontal);
+    var previousArrowName = this.previousArrowName(isHorizontal);
+    var nextArrowName = this.nextArrowName(isHorizontal);
     return (
       // @ts-ignore  function children
       h(Draggable, {
@@ -132,8 +132,11 @@ var SplitterBarVue2 = {
           on: _this2.v3 ? undefined : {
             "click": _this2.onPrevToggle
           }
-        }, [h("span", {
-          "class": previousArrowClass
+        }, [h(Icon, {
+          name: previousArrowName,
+          attrs: _this2.v3 ? undefined : {
+            name: previousArrowName
+          }
         })]), h("div", {
           "class": 'k-resize-handle'
         }), _this2.next.collapsible && h("span", {
@@ -142,8 +145,11 @@ var SplitterBarVue2 = {
           on: _this2.v3 ? undefined : {
             "click": _this2.onNextToggle
           }
-        }, [h("span", {
-          "class": nextArrowClass
+        }, [h(Icon, {
+          name: nextArrowName,
+          attrs: _this2.v3 ? undefined : {
+            name: nextArrowName
+          }
         })])])];
       } : [h("div", {
         tabindex: isStatic ? -1 : 0,
@@ -172,8 +178,11 @@ var SplitterBarVue2 = {
         on: _this2.v3 ? undefined : {
           "click": _this2.onPrevToggle
         }
-      }, [h("span", {
-        "class": previousArrowClass
+      }, [h(Icon, {
+        name: previousArrowName,
+        attrs: _this2.v3 ? undefined : {
+          name: previousArrowName
+        }
       })]), h("div", {
         "class": 'k-resize-handle'
       }), _this2.next.collapsible && h("span", {
@@ -182,8 +191,11 @@ var SplitterBarVue2 = {
         on: _this2.v3 ? undefined : {
           "click": _this2.onNextToggle
         }
-      }, [h("span", {
-        "class": nextArrowClass
+      }, [h(Icon, {
+        name: nextArrowName,
+        attrs: _this2.v3 ? undefined : {
+          name: nextArrowName
+        }
       })])])])
     );
   },
@@ -258,19 +270,15 @@ var SplitterBarVue2 = {
         }
       }
     },
-    previousArrowClass: function previousArrowClass(isHorizontal) {
-      var _a;
+    previousArrowName: function previousArrowName(isHorizontal) {
       var prev = this.$props.prev;
-      var isCollapsible = prev.collapsible;
       var isCollapsed = prev.collapsed;
-      return classNames('k-icon', (_a = {}, _a['k-i-caret-alt-left'] = isCollapsible && isHorizontal && !isCollapsed, _a['k-i-caret-alt-right'] = isCollapsible && isHorizontal && isCollapsed, _a['k-i-caret-alt-up'] = isCollapsible && !isHorizontal && !isCollapsed, _a['k-i-caret-alt-down'] = isCollapsible && !isHorizontal && isCollapsed, _a));
+      return isHorizontal && !isCollapsed ? 'caret-alt-left' : isHorizontal && isCollapsed ? 'caret-alt-right' : !isHorizontal && !isCollapsed ? 'caret-alt-up' : !isHorizontal && isCollapsed ? 'caret-alt-down' : '';
     },
-    nextArrowClass: function nextArrowClass(isHorizontal) {
-      var _a;
+    nextArrowName: function nextArrowName(isHorizontal) {
       var next = this.$props.next;
-      var isCollapsible = next.collapsible;
       var isCollapsed = next.collapsed;
-      return classNames('k-icon', (_a = {}, _a['k-i-caret-alt-right'] = isCollapsible && isHorizontal && !isCollapsed, _a['k-i-caret-alt-left'] = isCollapsible && isHorizontal && isCollapsed, _a['k-i-caret-alt-down'] = isCollapsible && !isHorizontal && !isCollapsed, _a['k-i-caret-alt-up'] = isCollapsible && !isHorizontal && isCollapsed, _a));
+      return isHorizontal && !isCollapsed ? 'caret-alt-right' : isHorizontal && isCollapsed ? 'caret-alt-left' : !isHorizontal && !isCollapsed ? 'caret-alt-down' : !isHorizontal && isCollapsed ? 'caret-alt-up' : '';
     }
   }
 };

package/dist/es/stepper/Step.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
-import { focusFirstFocusableChild, getDefaultSlots } from '@progress/kendo-vue-common';
+import { focusFirstFocusableChild, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
 import { messages, optionalText } from './messages/main';
@@ -121,7 +121,7 @@ var StepVue2 = {
     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 validationIcons = h("span", {
+    var validationIcons = h(Icon, {
       "class": 'k-step-indicator-icon ' + validationIconClasses,
       "aria-hidden": "true",
       attrs: this.v3 ? undefined : {

package/dist/esm/bottomnavigation/BottomNavigationItem.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { packageMetadata } from '../package-metadata.js';
-import { getTemplate, validatePackage } from '@progress/kendo-vue-common';
+import { getTemplate, Icon, validatePackage } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -93,8 +93,12 @@ var BottomNavigationItemVue2 = {
       onKeydown: this.handleKeyDown,
       "aria-selected": selected,
       "aria-disabled": disabled
-    }, [this.$props.item ? content : [icon && h("span", {
-      "class": "k-bottom-nav-item-icon k-icon k-i-".concat(icon)
+    }, [this.$props.item ? content : [icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon
+      },
+      "class": "k-bottom-nav-item-icon"
     }), text && h("span", {
       "class": 'k-bottom-nav-item-text',
       style: {

package/dist/esm/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 } from '@progress/kendo-vue-common';
+import { getTabIndex, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -95,8 +95,11 @@ var DrawerItemVue2 = {
         "click": this.handleClick
       },
       tabindex: getTabIndex(tabIndex, disabled)
-    }, [!item ? [icon && h("span", {
-      "class": 'k-icon ' + icon
+    }, [!item ? [icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon
+      }
     }), !expanded && mini ? null : h("span", {
       "class": 'k-item-text'
     }, [text])] : defaultSlot]);

package/dist/esm/expansionpanel/ExpansionPanel.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 { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 /**
  * @hidden
@@ -38,17 +38,20 @@ var ExpansionPanelVue2 = {
         'k-disabled': disabled
       };
     },
+    expandIconName: function expandIconName() {
+      var _a = this.$props,
+        expanded = _a.expanded,
+        expandIcon = _a.expandIcon,
+        collapseIcon = _a.collapseIcon;
+      return !expanded && !expandIcon ? 'chevron-down' : expanded && !collapseIcon ? 'chevron-up' : '';
+    },
     expandIconClass: function expandIconClass() {
       var _a;
       var _b = this.$props,
         expanded = _b.expanded,
         expandIcon = _b.expandIcon,
         collapseIcon = _b.collapseIcon;
-      return _a = {
-        'k-icon': true,
-        'k-i-chevron-down': !expanded && !expandIcon,
-        'k-i-chevron-up': expanded && !collapseIcon
-      }, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
+      return _a = {}, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
     }
   },
   data: function data() {
@@ -132,7 +135,11 @@ var ExpansionPanelVue2 = {
       "class": "k-spacer"
     }), subtitleToRender, h("span", {
       "class": "k-expander-indicator"
-    }, [h("span", {
+    }, [h(Icon, {
+      name: this.expandIconName,
+      attrs: this.v3 ? undefined : {
+        name: this.expandIconName
+      },
       "class": this.expandIconClass
     })])]), defaultSlots]);
   },

package/dist/esm/menu/components/MenuItemArrow.d.ts

@@ -23,15 +23,15 @@ export interface MenuItemArrowProps {
 /**
  * @hidden
  */
-export declare const downArrowClass = "k-i-caret-alt-down";
+export declare const downArrowClass = "caret-alt-down";
 /**
  * @hidden
  */
-export declare const rightArrowClass = "k-i-caret-alt-right";
+export declare const rightArrowClass = "caret-alt-right";
 /**
  * @hidden
  */
-export declare const leftArrowClass = "k-i-caret-alt-left";
+export declare const leftArrowClass = "caret-alt-left";
 /**
  * @hidden
  */

package/dist/esm/menu/components/MenuItemArrow.js

@@ -3,19 +3,20 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { Icon } from '@progress/kendo-vue-common';
 import { getChildrenPosition } from '../utils/misc.js';
 /**
  * @hidden
  */
-export var downArrowClass = 'k-i-caret-alt-down';
+export var downArrowClass = 'caret-alt-down';
 /**
  * @hidden
  */
-export var rightArrowClass = 'k-i-caret-alt-right';
+export var rightArrowClass = 'caret-alt-right';
 /**
  * @hidden
  */
-export var leftArrowClass = 'k-i-caret-alt-left';
+export var leftArrowClass = 'caret-alt-left';
 /**
  * @hidden
  */
@@ -37,21 +38,17 @@ var MenuItemArrowVue2 = {
     var h = gh || createElement;
     return h("span", {
       "class": "k-menu-expand-arrow"
-    }, [h("span", {
-      "class": this.getArrowClassName(),
-      role: "presentation",
+    }, [h(Icon, {
+      name: this.getArrowName(),
       attrs: this.v3 ? undefined : {
-        role: "presentation"
+        name: this.getArrowName()
       }
     })]);
   },
   methods: {
-    getArrowClassName: function getArrowClassName() {
-      var _a;
+    getArrowName: function getArrowName() {
       var childrenPosition = getChildrenPosition(this.$props.itemId, this.$props.verticalMenu === true, this.$props.dir === 'rtl');
-      return _a = {
-        'k-icon': true
-      }, _a[downArrowClass] = childrenPosition === 'downward', _a[rightArrowClass] = childrenPosition === 'rightward', _a[leftArrowClass] = childrenPosition === 'leftward', _a;
+      return childrenPosition === 'downward' ? downArrowClass : childrenPosition === 'rightward' ? rightArrowClass : childrenPosition === 'leftward' ? leftArrowClass : '';
     }
   }
 };

package/dist/esm/menu/components/MenuItemInternal.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, getTemplate, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, guid, getTemplate, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils.js';
 import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc.js';
@@ -157,11 +157,10 @@ var MenuItemInternalVue2 = {
       })]);
     };
     var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
-      return this.$props.item.icon ? h("span", {
-        "class": "k-icon k-i-".concat(this.$props.item.icon),
-        role: "presentation",
+      return this.$props.item.icon ? h(Icon, {
+        name: this.$props.item.icon,
         attrs: this.v3 ? undefined : {
-          role: "presentation"
+          name: this.$props.item.icon
         },
         key: "0"
       }) : null;

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669966527,
+    publishDate: 1672389706,
     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/panelbar/PanelBarItem.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 { classNames, getTemplate } from '@progress/kendo-vue-common';
+import { classNames, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { PanelBarGroup } from './PanelBarGroup.js';
 /**
  * @hidden
@@ -93,7 +93,8 @@ var PanelBarItemVue2 = {
       'k-selected': !disabled && selected,
       'k-focus': focused
     }, headerClassName);
-    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {}, _a['k-i-chevron-up'] = expanded && hasContent, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-i-chevron-down'] = !expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
+    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', (_a = {}, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
+    var itemIconName = expanded ? 'chevron-up' : 'chevron-down';
     var iconElement = function iconElement() {
       if (this.imageUrl) {
         return h("img", {
@@ -106,27 +107,26 @@ var PanelBarItemVue2 = {
           src: this.imageUrl
         });
       } else if (icon) {
-        var iconClasses = classNames('k-panelbar-item-icon', 'k-icon', 'k-i-' + icon);
-        return h("span", {
-          role: "presentation",
+        return h(Icon, {
+          name: icon,
           attrs: this.v3 ? undefined : {
-            role: "presentation"
+            name: icon
           },
-          "class": iconClasses
+          "class": 'k-panelbar-item-icon'
         });
       } else if (this.iconClass) {
-        return h("span", {
-          role: "presentation",
-          attrs: this.v3 ? undefined : {
-            role: "presentation"
-          },
+        return h(Icon, {
           "class": 'k-panelbar-item-icon ' + this.iconClass
         });
       }
       return null;
     };
     var iconRender = iconElement.call(this);
-    var arrow = !disabled && (items || content) ? h("span", {
+    var arrow = !disabled && (items || content) ? h(Icon, {
+      name: itemIconName,
+      attrs: this.v3 ? undefined : {
+        name: itemIconName
+      },
       "class": panelBarItemArrowClassName
     }) : null;
     var group = items || content ? h(PanelBarGroup, {