primevue 3.26.0 → 3.27.0

package/datatable/BodyCell.vue

@@ -19,25 +19,38 @@
         <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" />
+                <template v-else>
+                    <span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" />
+                    <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" />
+                </template>
             </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" />
             </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" />
             </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" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
@@ -45,6 +58,12 @@
 </template>
 
 <script>
+import BarsIcon from 'primevue/icons/bars';
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import PencilIcon from 'primevue/icons/pencil';
+import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
@@ -75,9 +94,9 @@ export default {
             type: Number,
             default: null
         },
-        rowTogglerIcon: {
-            type: Array,
-            default: null
+        isRowExpanded: {
+            type: Boolean,
+            default: false
         },
         selected: {
             type: Boolean,
@@ -110,6 +129,14 @@ export default {
         name: {
             type: String,
             default: null
+        },
+        expandedRowIcon: {
+            type: String,
+            default: null
+        },
+        collapsedRowIcon: {
+            type: String,
+            default: null
         }
     },
     documentEditListener: null,
@@ -118,8 +145,7 @@ export default {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {},
-            isRowExpanded: false
+            styleObject: {}
         };
     },
     watch: {
@@ -162,7 +188,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 +478,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

package/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="iconProps">
+                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" />
+                                        </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="iconProps">
+                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" />
+                                </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/icons/filter';
+import FilterSlashIcon from 'primevue/icons/filterslash';
+import PlusIcon from 'primevue/icons/plus';
+import TrashIcon from 'primevue/icons/trash';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -169,11 +176,42 @@ export default {
             type: Number,
             default: 2
         },
-        filterElement: null,
-        filterHeaderTemplate: null,
-        filterFooterTemplate: null,
-        filterClearTemplate: null,
-        filterApplyTemplate: null,
+        filterElement: {
+            type: Function,
+            default: null
+        },
+        filterHeaderTemplate: {
+            type: Function,
+            default: null
+        },
+        filterFooterTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearTemplate: {
+            type: Function,
+            default: null
+        },
+        filterApplyTemplate: {
+            type: Function,
+            default: null
+        },
+        filterIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterAddIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterRemoveIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearIconTemplate: {
+            type: Function,
+            default: null
+        },
         filters: {
             type: Object,
             default: null
@@ -590,7 +628,11 @@ export default {
     components: {
         CFDropdown: Dropdown,
         CFButton: Button,
-        Portal: Portal
+        Portal: Portal,
+        FilterSlashIcon: FilterSlashIcon,
+        FilterIcon: FilterIcon,
+        TrashIcon: TrashIcon,
+        PlusIcon: PlusIcon
     },
     directives: {
         focustrap: FocusTrap

package/datatable/DataTable.d.ts

@@ -36,7 +36,7 @@ export interface DataTableFilterMetaData {
     /**
      * Filter match mode
      */
-    matchMode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | undefined;
+    matchMode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | string | undefined;
 }
 
 /**
@@ -138,7 +138,7 @@ export interface DataTableSortEvent {
     /**
      * Match modes per field
      */
-    filterMatchModes: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | undefined;
+    filterMatchModes: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | string | undefined;
 }
 
 /**
@@ -611,7 +611,7 @@ export interface DataTableProps {
     loading?: boolean | undefined;
     /**
      * The icon to show while indicating data load is in progress.
-     * @defaultValue pi pi-spinner
+     *  @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
@@ -730,12 +730,12 @@ export interface DataTableProps {
     expandedRows?: any[] | DataTableExpandedRows | null;
     /**
      * Icon of the row toggler to display the row as expanded.
-     * @defaultValue pi-chevron-down
+     * @deprecated since v3.27.0. Use 'rowtogglericon' slot.
      */
     expandedRowIcon?: string | undefined;
     /**
      * Icon of the row toggler to display the row as collapsed.
-     * @defaultValue pi-chevron-right
+     * @deprecated since v3.27.0. Use 'rowtogglericon' slot.
      */
     collapsedRowIcon?: string | undefined;
     /**
@@ -900,6 +900,44 @@ 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[];
+    /**
+     * Custom paginator first page link icon template.
+     */
+    paginatorfirstpagelinkicon(): VNode[];
+    /**
+     * Custom paginator previous page link icon template.
+     */
+    paginatorprevpagelinkicon(): VNode[];
+    /**
+     * Custom paginator next page link icon template.
+     */
+    paginatornextpagelinkicon(): VNode[];
+    /**
+     * Custom paginator last page link icon template.
+     */
+    paginatorlastpagelinkicon(): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.

package/datatable/DataTable.vue

@@ -3,7 +3,11 @@
         <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>
+            <template v-else>
+                <component v-if="$slots.loadingicon" :is="$slots.loadingicon" class="p-datatable-loading-icon" />
+                <i v-else-if="loadingIcon" :class="['p-datatable-loading-icon pi-spin', loadingIcon]" />
+                <SpinnerIcon v-else spin class="p-datatable-loading-icon" />
+            </template>
         </div>
         <div v-if="$slots.header" class="p-datatable-header">
             <slot name="header"></slot>
@@ -27,6 +31,18 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </DTPaginator>
         <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }">
             <DTVirtualScroller
@@ -34,7 +50,7 @@
                 v-bind="virtualScrollerOptions"
                 :items="processedData"
                 :columns="columns"
-                :style="{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }"
+                :style="scrollHeight !== 'flex' ? { height: scrollHeight } : undefined"
                 :scrollHeight="scrollHeight !== 'flex' ? undefined : '100%'"
                 :disabled="virtualScrollerDisabled"
                 loaderDisabled
@@ -62,6 +78,7 @@
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
                             :filterInputProps="filterInputProps"
+                            :headerCheckboxIconTemplate="$slots.headercheckboxicon"
                             @column-click="onColumnHeaderClick($event)"
                             @column-mousedown="onColumnHeaderMouseDown($event)"
                             @filter-change="onFilterChange"
@@ -80,6 +97,7 @@
                             :frozenRow="true"
                             class="p-datatable-frozen-tbody"
                             :columns="slotProps.columns"
+                            :first="d_first"
                             :dataKey="dataKey"
                             :selection="selection"
                             :selectionKeys="d_selectionKeys"
@@ -134,6 +152,7 @@
                             :class="slotProps.styleClass"
                             :columns="slotProps.columns"
                             :empty="empty"
+                            :first="d_first"
                             :dataKey="dataKey"
                             :selection="selection"
                             :selectionKeys="d_selectionKeys"
@@ -211,15 +230,34 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </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/icons/arrowdown';
+import ArrowUpIcon from 'primevue/icons/arrowup';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
@@ -328,7 +366,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
         },
         sortField: {
             type: [String, Function],
@@ -432,11 +470,11 @@ export default {
         },
         expandedRowIcon: {
             type: String,
-            default: 'pi-chevron-down'
+            default: undefined
         },
         collapsedRowIcon: {
             type: String,
-            default: 'pi-chevron-right'
+            default: undefined
         },
         rowGroupMode: {
             type: String,
@@ -2249,9 +2287,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;
@@ -2276,7 +2311,10 @@ export default {
         DTTableHeader: TableHeader,
         DTTableBody: TableBody,
         DTTableFooter: TableFooter,
-        DTVirtualScroller: VirtualScroller
+        DTVirtualScroller: VirtualScroller,
+        ArrowDownIcon: ArrowDownIcon,
+        ArrowUpIcon: ArrowUpIcon,
+        SpinnerIcon: SpinnerIcon
     }
 };
 </script>

package/datatable/FooterCell.vue

@@ -12,7 +12,7 @@ export default {
     name: 'FooterCell',
     props: {
         column: {
-            type: null,
+            type: Object,
             default: null
         }
     },

package/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) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
+            </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/icons/sortalt';
+import SortAmountDownIcon from 'primevue/icons/sortamountdown';
+import SortAmountUpAltIcon from 'primevue/icons/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: Function,
+            default: null
         }
     },
     data() {
@@ -267,7 +280,7 @@ export default {
 
             return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
-        sortableColumnIcon() {
+        sortState() {
             let sorted = false;
             let sortOrder = null;
 
@@ -283,21 +296,26 @@ 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
-                }
-            ];
+            return {
+                sorted,
+                sortOrder
+            };
+        },
+        sortableColumnIcon() {
+            const { sorted, sortOrder } = this.sortState;
+
+            if (!sorted) return SortAltIcon;
+            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
+            else if (sorted && sortOrder < 0) return SortAmountDownIcon;
+
+            return null;
         },
         ariaSort() {
             if (this.columnProp('sortable')) {
-                const sortIcon = this.sortableColumnIcon;
+                const { sorted, sortOrder } = this.sortState;
 
-                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                if (sorted && sortOrder < 0) return 'descending';
+                else if (sorted && sortOrder > 0) return 'ascending';
                 else return 'none';
             } else {
                 return null;
@@ -306,7 +324,10 @@ export default {
     },
     components: {
         DTHeaderCheckbox: HeaderCheckbox,
-        DTColumnFilter: ColumnFilter
+        DTColumnFilter: ColumnFilter,
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
     }
 };
 </script>

package/datatable/HeaderCheckbox.vue

@@ -4,12 +4,14 @@
             <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 v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <CheckIcon v-else class="p-checkbox-icon" />
         </div>
     </div>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icons/check';
 import { DomHandler } from 'primevue/utils';
 
 export default {
@@ -17,7 +19,11 @@ export default {
     emits: ['change'],
     props: {
         checked: null,
-        disabled: null
+        disabled: null,
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
     },
     data() {
         return {
@@ -46,6 +52,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>

package/datatable/RowCheckbox.vue

@@ -4,12 +4,14 @@
             <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 v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <CheckIcon v-else class="p-checkbox-icon" />
         </div>
     </div>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icons/check';
 import { DomHandler } from 'primevue/utils';
 
 export default {
@@ -17,7 +19,11 @@ export default {
     emits: ['change'],
     props: {
         value: null,
-        checked: null
+        checked: null,
+        rowCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
     },
     data() {
         return {
@@ -60,6 +66,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>