diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index 2c7fbc615..143b0a571 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -20,14 +20,19 @@
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                             <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
                         <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                             <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <component v-if="isItemGroup(processedItem)" :is="templates.submenuicon || (horizontal ? 'AngleDownIcon' : 'AngleRightIcon')" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                            <template v-if="isItemGroup(processedItem)">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" />
+                            </template>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
diff --git a/components/lib/menu/Menuitem.vue b/components/lib/menu/Menuitem.vue
index 6ab38c739..b6f3cbac9 100644
--- a/components/lib/menu/Menuitem.vue
+++ b/components/lib/menu/Menuitem.vue
@@ -4,12 +4,14 @@
             <template v-if="!templates.item">
                 <router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                     <a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                        <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
+                        <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
+                        <span v-else-if="item.icon" :class="iconClass" />
                         <span class="p-menuitem-text">{{ label() }}</span>
                     </a>
                 </router-link>
                 <a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true">
-                    <component :is="templates.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="iconClass" />
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
+                    <span v-else-if="item.icon" :class="iconClass" />
                     <span class="p-menuitem-text">{{ label() }}</span>
                 </a>
             </template>
diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
index e2a33e07d..bd1e688c3 100755
--- a/components/lib/menubar/Menubar.d.ts
+++ b/components/lib/menubar/Menubar.d.ts
@@ -61,9 +61,9 @@ export interface MenubarSlots {
         item: MenuItem;
     }): VNode[];
     /**
-     * Custom bar icon template.
+     * Custom popup icon template on responsive mode.
      */
-    baricon(): VNode[];
+    popupicon(): VNode[];
     /**
      * Custom submenu icon template.
      */
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index d2ac8e8bd..09466c067 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -17,8 +17,8 @@
             @keydown="menuButtonKeydown($event)"
             v-bind="buttonProps"
         >
-            <slot name="baricon">
-                <component :is="'BarsIcon'" />
+            <slot name="popupicon">
+                <BarsIcon />
             </slot>
         </a>
         <MenubarSub
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index b2958965f..451e14469 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -19,14 +19,19 @@
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                             <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
                         <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                             <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || (root ? 'AngleDownIcon' : 'AngleRightIcon')" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                            <template v-if="getItemProp(processedItem, 'items')">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" />
+                            </template>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
diff --git a/components/lib/organizationchart/OrganizationChartNode.vue b/components/lib/organizationchart/OrganizationChartNode.vue
index 0cc1b7fac..b7b1ef0ff 100755
--- a/components/lib/organizationchart/OrganizationChartNode.vue
+++ b/components/lib/organizationchart/OrganizationChartNode.vue
@@ -6,7 +6,8 @@
                     <div :class="nodeContentClass" @click="onNodeClick">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
                         <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
-                            <component :is="templates.togglericon || (expanded ? 'ChevronDownIcon' : 'ChevronUpIcon')" :expanded="expanded" class="p-node-toggler-icon" />
+                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
+                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" />
                         </a>
                     </div>
                 </td>
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 547c9ea5a..615fb8ee9 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -18,7 +18,8 @@
                         <template v-if="!$slots.item">
                             <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
                                 <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)">
-                                    <component :is="$slots.headericon || (getItemProp(item, 'icon') ? 'span' : undefined)" :item="item" :class="getHeaderIconClass(item)" />
+                                    <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                    <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
                                     <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
                                 </a>
                             </router-link>
@@ -26,7 +27,8 @@
                                 <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
                                     <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
                                 </slot>
-                                <component :is="$slots.headericon || (getItemProp(item, 'icon') ? 'span' : undefined)" :item="item" :class="getHeaderIconClass(item)" />
+                                <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
                             </a>
                         </template>
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index 277110132..3c84b2bbc 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -17,13 +17,18 @@
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                             <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
                         <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <component v-if="isItemGroup(processedItem)" :is="templates.submenuicon || (isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-submenu-icon" :active="isItemActive(processedItem)" />
-                            <component :is="templates.itemicon || (getItemProp(processedItem, 'icon') ? 'span' : undefined)" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <template v-if="isItemGroup(processedItem)">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
+                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
+                            </template>
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                             <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index a2920299c..8de4d2c1d 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -14,8 +14,10 @@
                 :aria-labelledby="ariaLabelledby"
             >
                 <template #icon>
-                    <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
-                    <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
+                    <slot name="icon" :visible="d_visible">
+                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
+                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
+                    </slot>
                 </template>
             </SDButton>
         </slot>
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 0e0a8eae3..e01248055 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -1,7 +1,13 @@
 <template>
     <div :class="containerClass" :style="style">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
+            <PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps">
+                <template #icon>
+                    <slot name="icon">
+                        <span :class="icon" />
+                    </slot>
+                </template>
+            </PVSButton>
         </slot>
         <PVSButton
             ref="button"
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index 8e7945b7c..3d43ab68a 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -17,7 +17,8 @@
                                 @click="onItemClick($event, item, i, navigate)"
                                 @keydown="onKeydownItem($event, item, i, navigate)"
                             >
-                                <component :is="$slots.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="getItemIcon(item)" />
+                                <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
+                                <span v-else-if="item.icon" :class="getItemIcon(item)" />
                                 <span class="p-menuitem-text">{{ label(item) }}</span>
                             </a>
                         </template>
@@ -27,7 +28,8 @@
                 <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)">
                     <template v-if="!$slots.item">
                         <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)">
-                            <component :is="$slots.itemicon || (item.icon ? 'span' : undefined)" :item="item" :class="getItemIcon(item)" />
+                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
+                            <span v-else-if="item.icon" :class="getItemIcon(item)" />
                             <span class="p-menuitem-text">{{ label(item) }}</span>
                         </a>
                     </template>
diff --git a/components/lib/tag/Tag.vue b/components/lib/tag/Tag.vue
index 39304c312..259288a81 100644
--- a/components/lib/tag/Tag.vue
+++ b/components/lib/tag/Tag.vue
@@ -1,6 +1,7 @@
 <template>
     <span :class="containerClass">
-        <span v-if="icon" :class="iconClass"></span>
+        <component v-if="$slots.icon" :is="$slots.icon" class="p-tag-icon" />
+        <span v-else-if="icon" :class="iconClass"></span>
         <slot>
             <span class="p-tag-value">{{ value }}</span>
         </slot>
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index 82cf151c4..8d51ef64a 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -19,14 +19,19 @@
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                             <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
                         <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                             <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <component v-if="getItemProp(processedItem, 'items')" :is="templates.submenuicon || 'AngleRightIcon'" class="p-submenu-icon" :active="isItemActive(processedItem)" />
+                            <template v-if="getItemProp(processedItem, 'items')">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
+                                <AngleRightIcon v-else class="p-submenu-icon" />
+                            </template>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index 0005908d8..5954950ec 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -16,7 +16,9 @@
                 v-bind="inputProps"
             />
         </span>
-        <span v-if="hasIcon" :class="iconClass"></span>
+        <slot name="icon" :value="modelValue" :class="iconClass">
+            <span v-if="onIcon || offIcon" :class="iconClass" />
+        </slot>
         <span class="p-button-label">{{ label }}</span>
     </div>
 </template>
@@ -149,7 +151,7 @@ export default {
             return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
         },
         hasIcon() {
-            return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
+            return this.$slots.icon || (this.onIcon && this.offIcon);
         },
         label() {
             return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
diff --git a/components/lib/tree/Tree.vue b/components/lib/tree/Tree.vue
index 74b74823a..5b350a9bb 100755
--- a/components/lib/tree/Tree.vue
+++ b/components/lib/tree/Tree.vue
@@ -3,7 +3,8 @@
         <template v-if="loading">
             <div class="p-tree-loading-overlay p-component-overlay">
                 <slot name="loadingicon">
-                    <component :is="loadingIcon ? 'i' : 'SpinnerIcon'" spin :class="['p-tree-loading-icon', loadingIcon]" />
+                    <i v-if="loadingIcon" :class="['p-tree-loading-icon pi-spin', loadingIcon]" />
+                    <SpinnerIcon v-else spin class="p-tree-loading-icon" />
                 </slot>
             </div>
         </template>
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index 13b71afb8..cc3cf81fc 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -15,11 +15,14 @@
     >
         <div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style">
             <button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true">
-                <component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? node.expandedIcon || 'ChevronDownIcon' : node.collapsedIcon || 'ChevronRightIcon'" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
+                <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
+                <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
+                <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
             </button>
             <div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true">
                 <div :class="checkboxClass" role="checkbox">
-                    <component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                    <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                    <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
                 </div>
             </div>
             <span :class="icon"></span>
diff --git a/components/lib/treetable/BodyCell.vue b/components/lib/treetable/BodyCell.vue
index 7f14530fd..37292c518 100644
--- a/components/lib/treetable/BodyCell.vue
+++ b/components/lib/treetable/BodyCell.vue
@@ -1,14 +1,17 @@
 <template>
     <td :style="containerStyle" :class="containerClass" role="cell">
         <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
-            <component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? 'ChevronDownIcon' : 'ChevronRightIcon'" :expanded="expanded" class="p-treetable-toggler-icon" />
+            <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
+            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
+            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
         </button>
         <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
             <div class="p-hidden-accessible">
                 <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
             </div>
             <div ref="checkboxEl" :class="checkboxClass">
-                <component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
             </div>
         </div>
         <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />