From b82c553747ca72884c12682321d67763719805a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 13 Apr 2023 17:42:33 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For DataTable & Column

---
 api-generator/components/column.js          | 44 +++++++++++++
 api-generator/components/datatable.js       | 28 +++++---
 components/lib/column/Column.d.ts           | 72 +++++++++++++++++++++
 components/lib/datatable/BodyCell.vue       | 53 +++++++++++----
 components/lib/datatable/ColumnFilter.vue   | 39 +++++++----
 components/lib/datatable/DataTable.d.ts     | 25 ++++++-
 components/lib/datatable/DataTable.vue      | 28 +++++---
 components/lib/datatable/HeaderCell.vue     | 44 ++++++++++---
 components/lib/datatable/HeaderCheckbox.vue | 12 +++-
 components/lib/datatable/RowCheckbox.vue    | 12 +++-
 components/lib/datatable/TableBody.vue      | 24 ++++---
 components/lib/datatable/TableHeader.vue    |  6 ++
 12 files changed, 314 insertions(+), 73 deletions(-)

diff --git a/api-generator/components/column.js b/api-generator/components/column.js
index 380fbc8ec..243428103 100644
--- a/api-generator/components/column.js
+++ b/api-generator/components/column.js
@@ -289,6 +289,50 @@ const ColumnSlots = [
     {
         name: 'filterapply',
         description: "Custom content for the filter menu's apply section"
+    },
+    {
+        name: 'rowtogglericon',
+        description: 'Custom row toggler icon template.'
+    },
+    {
+        name: 'roweditoriniticon',
+        description: 'Custom row editor init icon template.'
+    },
+    {
+        name: 'roweditorsaveicon',
+        description: 'Custom row editor save icon template.'
+    },
+    {
+        name: 'roweditorcancelicon',
+        description: 'Custom row editor cancel icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    },
+    {
+        name: 'filterclearicon',
+        description: 'Custom filter clear icon template.'
+    },
+    {
+        name: 'filterremoveicon',
+        description: 'Custom filter remove icon template.'
+    },
+    {
+        name: 'filteraddicon',
+        description: 'Custom filter add icon template.'
+    },
+    {
+        name: 'sorticon',
+        description: 'Custom sort icon template.'
+    },
+    {
+        name: 'headercheckboxicon',
+        description: 'Custom header checkbox icon template.'
+    },
+    {
+        name: 'rowcheckboxicon',
+        description: 'Custom row checkbox icon template.'
     }
 ];
 
diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index a2e48a9e2..f57aa6f32 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -1120,31 +1120,43 @@ const DataTableEvents = [
 const DataTableSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'paginatorstart',
-        description: "Custom content for the component paginator's left side"
+        description: "Custom content for the component paginator's left side."
     },
     {
         name: 'paginatorend',
-        description: "Custom content for the component paginator's right side"
+        description: "Custom content for the component paginator's right side."
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
     },
     {
         name: 'groupheader',
-        description: "Custom content for the component's subgroup header"
+        description: "Custom content for the component's subgroup header."
     },
     {
         name: 'groupfooter',
-        description: "Custom content for the component's subgroup footer"
+        description: "Custom content for the component's subgroup footer."
     },
     {
-        name: 'expansion',
-        description: "Custom content for the component's expanded content"
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'reorderindicatorupicon',
+        description: 'Custom reorder indicator up icon template.'
+    },
+    {
+        name: 'reorderindicatordownicon',
+        description: 'Custom reorder indicator down icon template.'
+    },
+    {
+        name: 'rowgrouptogglericon',
+        description: 'Custom rowgroup toggler icon template.'
     }
 ];
 
diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
index 7bd646f7d..4a5804eab 100755
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@@ -486,6 +486,78 @@ export interface ColumnSlots {
          */
         loadingOptions: ColumnLoadingOptions;
     }): VNode[];
+    /**
+     * Custom row toggler icon template.
+     * @param {Object} scope - row toggler icon slot's params.
+     */
+    rowtogglericon(scope: {
+        /**
+         * Current row expanded state.
+         */
+        rowExpanded: boolean;
+    }): VNode[];
+    /**
+     * Custom row checkbox icon template.
+     * @param {Object} scope - header row icon slot's params.
+     */
+    rowcheckboxicon(scope: {
+        /**
+         * Current check state.
+         */
+        checked: boolean;
+    }): VNode[];
+    /**
+     * Custom row editor init icon template.
+     */
+    roweditoriniticon(): VNode[];
+    /**
+     * Custom row editor save icon template.
+     */
+    roweditorsaveicon(): VNode[];
+    /**
+     * Custom row editor cancel icon template.
+     */
+    roweditorcancelicon(): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(): VNode[];
+    /**
+     * Custom filter clear icon template.
+     */
+    filterclearicon(): VNode[];
+    /**
+     * Custom filter remove icon template.
+     */
+    filterremoveicon(): VNode[];
+    /**
+     * Custom filter add icon template.
+     */
+    filteraddicon(): VNode[];
+    /**
+     * Custom sort icon template.
+     * @param {Object} scope - sort icon slot's params.
+     */
+    sorticon(scope: {
+        /**
+         * Current sort state.
+         */
+        sorted: boolean;
+        /**
+         * Current sort order state.
+         */
+        sortOrder: boolean;
+    }): VNode[];
+    /**
+     * Custom header checkbox icon template.
+     * @param {Object} scope - header checkbox icon slot's params.
+     */
+    headercheckboxicon(scope: {
+        /**
+         * Current check state.
+         */
+        checked: boolean;
+    }): VNode[];
 }
 
 export interface ColumnEmits {}
diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
index f06159d31..9263f7ff6 100755
--- a/components/lib/datatable/BodyCell.vue
+++ b/components/lib/datatable/BodyCell.vue
@@ -19,25 +19,34 @@
         <component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
         <template v-else-if="columnProp('selectionMode')">
             <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" />
-            <DTCheckbox v-else-if="columnProp('selectionMode') === 'multiple'" :value="rowData" :checked="selected" :aria-selected="selected ? true : undefined" @change="toggleRowWithCheckbox($event, rowIndex)" />
+            <DTCheckbox
+                v-else-if="columnProp('selectionMode') === 'multiple'"
+                :value="rowData"
+                :checked="selected"
+                :rowCheckboxIconTemplate="column.children && column.children.rowcheckboxicon"
+                :aria-selected="selected ? true : undefined"
+                @change="toggleRowWithCheckbox($event, rowIndex)"
+            />
         </template>
         <template v-else-if="columnProp('rowReorder')">
-            <i :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon') || 'pi pi-bars']"></i>
+            <component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
         </template>
         <template v-else-if="columnProp('expander')">
             <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow">
-                <span :class="rowTogglerIcon"></span>
+                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
+                <component v-else-if="column.children && !column.children.rowtogglericon && isRowExpanded" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" />
+                <component v-else-if="column.children && !column.children.rowtogglericon && !isRowExpanded" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" />
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit">
-                <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
+                <component :is="(column.children && !column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon pi-fw" />
             </button>
             <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave">
-                <span class="p-row-editor-save-icon pi pi-fw pi-check"></span>
+                <component :is="(column.children && !column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon pi-fw" />
             </button>
             <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel">
-                <span class="p-row-editor-cancel-icon pi pi-fw pi-times"></span>
+                <component :is="(column.children && !column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon pi-fw" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
@@ -45,6 +54,12 @@
 </template>
 
 <script>
+import BarsIcon from 'primevue/icon/bars';
+import CheckIcon from 'primevue/icon/check';
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronRightIcon from 'primevue/icon/chevronright';
+import PencilIcon from 'primevue/icon/pencil';
+import TimesIcon from 'primevue/icon/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
@@ -75,9 +90,9 @@ export default {
             type: Number,
             default: null
         },
-        rowTogglerIcon: {
-            type: Array,
-            default: null
+        isRowExpanded: {
+            type: Boolean,
+            default: false
         },
         selected: {
             type: Boolean,
@@ -110,6 +125,14 @@ export default {
         name: {
             type: String,
             default: null
+        },
+        expandedRowIcon: {
+            type: String,
+            default: null
+        },
+        collapsedRowIcon: {
+            type: String,
+            default: null
         }
     },
     documentEditListener: null,
@@ -118,8 +141,7 @@ export default {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {},
-            isRowExpanded: false
+            styleObject: {}
         };
     },
     watch: {
@@ -162,7 +184,6 @@ export default {
             return ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
         toggleRow(event) {
-            this.isRowExpanded = !this.isRowExpanded;
             this.$emit('row-toggle', {
                 originalEvent: event,
                 data: this.rowData
@@ -453,7 +474,13 @@ export default {
     },
     components: {
         DTRadioButton: RowRadioButton,
-        DTCheckbox: RowCheckbox
+        DTCheckbox: RowCheckbox,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon,
+        BarsIcon: BarsIcon,
+        PencilIcon: PencilIcon,
+        CheckIcon: CheckIcon,
+        TimesIcon: TimesIcon
     },
     directives: {
         ripple: Ripple
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 15124059a..575e97c2a 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -16,9 +16,11 @@
             @click="toggleMenu()"
             @keydown="onToggleButtonKeyDown($event)"
         >
-            <span class="pi pi-filter-icon pi-filter"></span>
+            <component :is="filterIconTemplate || 'FilterIcon'" />
+        </button>
+        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()">
+            <component :is="filterClearIconTemplate || 'FilterSlashIcon'" />
         </button>
-        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div
@@ -78,19 +80,20 @@
                                 ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
                                 <div>
-                                    <CFButton
-                                        v-if="showRemoveIcon"
-                                        type="button"
-                                        icon="pi pi-trash"
-                                        class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
-                                        @click="removeConstraint(i)"
-                                        :label="removeRuleButtonLabel"
-                                    ></CFButton>
+                                    <CFButton v-if="showRemoveIcon" type="button" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel">
+                                        <template #icon>
+                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" class="p-button-icon-left" />
+                                        </template>
+                                    </CFButton>
                                 </div>
                             </div>
                         </div>
                         <div v-if="isShowAddConstraint" class="p-column-filter-add-rule">
-                            <CFButton type="button" :label="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"></CFButton>
+                            <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()">
+                                <template #icon>
+                                    <component :is="filterAddIconTemplate || 'PlusIcon'" class="p-button-icon-left" />
+                                </template>
+                            </CFButton>
                         </div>
                         <div class="p-column-filter-buttonbar">
                             <CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter"></CFButton>
@@ -113,6 +116,10 @@ import { FilterOperator } from 'primevue/api';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import FocusTrap from 'primevue/focustrap';
+import FilterIcon from 'primevue/icon/filter';
+import FilterSlashIcon from 'primevue/icon/filterslash';
+import PlusIcon from 'primevue/icon/plus';
+import TrashIcon from 'primevue/icon/trash';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -174,6 +181,10 @@ export default {
         filterFooterTemplate: null,
         filterClearTemplate: null,
         filterApplyTemplate: null,
+        filterIconTemplate: null,
+        filterAddIconTemplate: null,
+        filterRemoveIconTemplate: null,
+        filterClearIconTemplate: null,
         filters: {
             type: Object,
             default: null
@@ -590,7 +601,11 @@ export default {
     components: {
         CFDropdown: Dropdown,
         CFButton: Button,
-        Portal: Portal
+        Portal: Portal,
+        FilterSlashIcon: FilterSlashIcon,
+        FilterIcon: FilterIcon,
+        TrashIcon: TrashIcon,
+        PlusIcon: PlusIcon
     },
     directives: {
         focustrap: FocusTrap
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 412c7e32d..83584f4bc 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -611,7 +611,6 @@ export interface DataTableProps {
     loading?: boolean | undefined;
     /**
      * The icon to show while indicating data load is in progress.
-     * @defaultValue pi pi-spinner
      */
     loadingIcon?: string | undefined;
     /**
@@ -730,12 +729,10 @@ export interface DataTableProps {
     expandedRows?: any[] | DataTableExpandedRows | null;
     /**
      * Icon of the row toggler to display the row as expanded.
-     * @defaultValue pi-chevron-down
      */
     expandedRowIcon?: string | undefined;
     /**
      * Icon of the row toggler to display the row as collapsed.
-     * @defaultValue pi-chevron-right
      */
     collapsedRowIcon?: string | undefined;
     /**
@@ -900,6 +897,28 @@ export interface DataTableSlots {
          */
         index: number;
     }): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
+    /**
+     * Custom reorder indicator up icon template.
+     */
+    reorderindicatorupicon(): VNode[];
+    /**
+     * Custom reorder indicator down icon template.
+     */
+    reorderindicatordownicon(): VNode[];
+    /**
+     * Custom rowgroup toggler icon template.
+     * @param {Object} scope - rowgroup toggler icon slot's params.
+     */
+    rowgrouptogglericon(scope: {
+        /**
+         * Current rowgroup's expanded state.
+         */
+        expanded: boolean;
+    }): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 46a30facc..6d2db8056 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -3,7 +3,7 @@
         <slot></slot>
         <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay">
             <slot v-if="$slots.loading" name="loading"></slot>
-            <i v-else :class="loadingIconClass"></i>
+            <component v-else :is="$slots.loadingicon ? $slots.loadingicon : loadingIcon ? 'i' : 'SpinnerIcon'" spin :class="['p-datatable-loading-icon', loadingIcon]" />
         </div>
         <div v-if="$slots.header" class="p-datatable-header">
             <slot name="header"></slot>
@@ -62,6 +62,7 @@
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
                             :filterInputProps="filterInputProps"
+                            :headerCheckboxIconTemplate="$slots.headercheckboxicon"
                             @column-click="onColumnHeaderClick($event)"
                             @column-mousedown="onColumnHeaderMouseDown($event)"
                             @filter-change="onFilterChange"
@@ -215,13 +216,20 @@
             </template>
         </DTPaginator>
         <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none"></div>
-        <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="position: absolute; display: none" />
-        <span v-if="reorderableColumns" ref="reorderIndicatorDown" class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="position: absolute; display: none" />
+        <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="p-datatable-reorder-indicator-up" style="position: absolute; display: none">
+            <component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" />
+        </span>
+        <span v-if="reorderableColumns" ref="reorderIndicatorDown" class="p-datatable-reorder-indicator-down" style="position: absolute; display: none">
+            <component :is="$slots.reorderindicatordownicon || 'ArrowUpIcon'" />
+        </span>
     </div>
 </template>
 
 <script>
 import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api';
+import ArrowDownIcon from 'primevue/icon/arrowdown';
+import ArrowUpIcon from 'primevue/icon/arrowup';
+import SpinnerIcon from 'primevue/icon/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
@@ -330,7 +338,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
         },
         sortField: {
             type: [String, Function],
@@ -434,11 +442,11 @@ export default {
         },
         expandedRowIcon: {
             type: String,
-            default: 'pi-chevron-down'
+            default: undefined
         },
         collapsedRowIcon: {
             type: String,
-            default: 'pi-chevron-right'
+            default: undefined
         },
         rowGroupMode: {
             type: String,
@@ -2251,9 +2259,6 @@ export default {
         sorted() {
             return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0);
         },
-        loadingIconClass() {
-            return ['p-datatable-loading-icon pi-spin', this.loadingIcon];
-        },
         allRowsSelected() {
             if (this.selectAll !== null) {
                 return this.selectAll;
@@ -2278,7 +2283,10 @@ export default {
         DTTableHeader: TableHeader,
         DTTableBody: TableBody,
         DTTableFooter: TableFooter,
-        DTVirtualScroller: VirtualScroller
+        DTVirtualScroller: VirtualScroller,
+        ArrowDownIcon: ArrowDownIcon,
+        ArrowUpIcon: ArrowUpIcon,
+        SpinnerIcon: SpinnerIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index 673026188..15f3686e3 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -19,9 +19,11 @@
         <div class="p-column-header-content">
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
             <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
-            <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
+            <span v-if="columnProp('sortable')">
+                <component :is="(column.children && column.children.sorticon) || findSortIcon" :sorted="sortableColumnIcon[1].sorted" :sortOrder="sortableColumnIcon[1].sortOrder" class="p-sortable-column-icon pi-fw" />
+            </span>
             <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
-            <DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" />
+            <DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" :headerCheckboxIconTemplate="headerCheckboxIconTemplate" />
             <DTColumnFilter
                 v-if="filterDisplay === 'menu' && column.children && column.children.filter"
                 :field="columnProp('filterField') || columnProp('field')"
@@ -33,6 +35,10 @@
                 :filterFooterTemplate="column.children && column.children.filterfooter"
                 :filterClearTemplate="column.children && column.children.filterclear"
                 :filterApplyTemplate="column.children && column.children.filterapply"
+                :filterIconTemplate="column.children && column.children.filtericon"
+                :filterAddIconTemplate="column.children && column.children.filteraddicon"
+                :filterRemoveIconTemplate="column.children && column.children.filterremoveicon"
+                :filterClearIconTemplate="column.children && column.children.filterclearicon"
                 :filters="filters"
                 :filtersStore="filtersStore"
                 :filterInputProps="filterInputProps"
@@ -58,6 +64,9 @@
 </template>
 
 <script>
+import SortAltIcon from 'primevue/icon/sortalt';
+import SortAmountDownIcon from 'primevue/icon/sortamountdown';
+import SortAmountUpAltIcon from 'primevue/icon/sortamountupalt';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import ColumnFilter from './ColumnFilter.vue';
 import HeaderCheckbox from './HeaderCheckbox.vue';
@@ -146,6 +155,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -284,20 +297,28 @@ export default {
             }
 
             return [
-                'p-sortable-column-icon pi pi-fw',
                 {
-                    'pi-sort-alt': !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
-                    'pi-sort-amount-down': sorted && sortOrder < 0
+                    SortAltIcon: !sorted,
+                    SortAmountUpAltIcon: sorted && sortOrder > 0,
+                    SortAmountDownIcon: sorted && sortOrder < 0
+                },
+                {
+                    sorted,
+                    sortOrder
                 }
             ];
         },
+        findSortIcon() {
+            const sortIcon = this.sortableColumnIcon[0];
+
+            return Object.keys(sortIcon).find((key) => sortIcon[key] === true);
+        },
         ariaSort() {
             if (this.columnProp('sortable')) {
-                const sortIcon = this.sortableColumnIcon;
+                const sortIcon = this.sortableColumnIcon[0];
 
-                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                if (sortIcon['SortAmountDownIcon']) return 'descending';
+                else if (sortIcon['SortAmountUpAltIcon']) return 'ascending';
                 else return 'none';
             } else {
                 return null;
@@ -306,7 +327,10 @@ export default {
     },
     components: {
         DTHeaderCheckbox: HeaderCheckbox,
-        DTColumnFilter: ColumnFilter
+        DTColumnFilter: ColumnFilter,
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/HeaderCheckbox.vue b/components/lib/datatable/HeaderCheckbox.vue
index 9162d77d6..43ff66745 100755
--- a/components/lib/datatable/HeaderCheckbox.vue
+++ b/components/lib/datatable/HeaderCheckbox.vue
@@ -4,12 +4,13 @@
             <input ref="input" type="checkbox" :checked="checked" :disabled="disabled" :tabindex="disabled ? null : '0'" :aria-label="headerCheckboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" />
         </div>
         <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
-            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
+            <component :is="headerCheckboxIconTemplate || 'CheckIcon'" :checked="checked" class="p-checkbox-icon" />
         </div>
     </div>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icon/check';
 import { DomHandler } from 'primevue/utils';
 
 export default {
@@ -17,7 +18,11 @@ export default {
     emits: ['change'],
     props: {
         checked: null,
-        disabled: null
+        disabled: null,
+        headerCheckboxIconTemplate: {
+            type: null,
+            default: null
+        }
     },
     data() {
         return {
@@ -46,6 +51,9 @@ export default {
         headerCheckboxAriaLabel() {
             return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectAll : this.$primevue.config.locale.aria.unselectAll) : undefined;
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/RowCheckbox.vue b/components/lib/datatable/RowCheckbox.vue
index ac22a3767..433360637 100755
--- a/components/lib/datatable/RowCheckbox.vue
+++ b/components/lib/datatable/RowCheckbox.vue
@@ -4,12 +4,13 @@
             <input ref="input" type="checkbox" :checked="checked" :disabled="$attrs.disabled" :tabindex="$attrs.disabled ? null : '0'" :aria-label="checkboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeydown" />
         </div>
         <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]">
-            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
+            <component :is="rowCheckboxIconTemplate || 'CheckIcon'" :checked="checked" class="p-checkbox-icon" />
         </div>
     </div>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icon/check';
 import { DomHandler } from 'primevue/utils';
 
 export default {
@@ -17,7 +18,11 @@ export default {
     emits: ['change'],
     props: {
         value: null,
-        checked: null
+        checked: null,
+        rowCheckboxIconTemplate: {
+            type: null,
+            default: null
+        }
     },
     data() {
         return {
@@ -60,6 +65,9 @@ export default {
         checkboxAriaLabel() {
             return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
index 666e09b66..baa6a57db 100755
--- a/components/lib/datatable/TableBody.vue
+++ b/components/lib/datatable/TableBody.vue
@@ -11,7 +11,9 @@
                 >
                     <td :colspan="columnsLength - 1">
                         <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
-                            <span :class="rowGroupTogglerIcon(rowData)"></span>
+                            <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
+                            <component v-else-if="!templates['rowgrouptogglericon'] && isRowGroupExpanded(rowData)" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" />
+                            <component v-else-if="!templates['rowgrouptogglericon'] && !isRowGroupExpanded(rowData)" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" />
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
@@ -45,7 +47,6 @@
                             :rowIndex="getRowIndex(index)"
                             :index="i"
                             :selected="isSelected(rowData)"
-                            :rowTogglerIcon="columnProp(col, 'expander') ? rowTogglerIcon(rowData) : null"
                             :frozenRow="frozenRow"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null"
                             :editMode="editMode"
@@ -55,6 +56,9 @@
                             :virtualScrollerContentProps="virtualScrollerContentProps"
                             :ariaControls="expandedRowId + '_' + index + '_expansion'"
                             :name="nameAttributeSelector"
+                            :isRowExpanded="isRowExpanded(rowData)"
+                            :expandedRowIcon="expandedRowIcon"
+                            :collapsedRowIcon="collapsedRowIcon"
                             @radio-change="onRadioChange($event)"
                             @checkbox-change="onCheckboxChange($event)"
                             @row-toggle="onRowToggle($event)"
@@ -89,6 +93,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronRightIcon from 'primevue/icon/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
@@ -389,16 +395,6 @@ export default {
                 return null;
             }
         },
-        rowTogglerIcon(rowData) {
-            const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-
-            return ['p-row-toggler-icon pi', icon];
-        },
-        rowGroupTogglerIcon(rowData) {
-            const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-
-            return ['p-row-toggler-icon pi', icon];
-        },
         isGrouped(column) {
             if (this.groupRowsBy && this.columnProp(column, 'field')) {
                 if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;
@@ -593,7 +589,9 @@ export default {
         }
     },
     components: {
-        DTBodyCell: BodyCell
+        DTBodyCell: BodyCell,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/TableHeader.vue b/components/lib/datatable/TableHeader.vue
index 53261751e..8fb02da17 100755
--- a/components/lib/datatable/TableHeader.vue
+++ b/components/lib/datatable/TableHeader.vue
@@ -35,6 +35,7 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
                     />
                 </template>
             </tr>
@@ -104,6 +105,7 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
                     />
                 </template>
             </tr>
@@ -205,6 +207,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: null,
+            default: null
         }
     },
     methods: {