primereact 9.2.2 → 9.3.0

package/datatable/datatable.cjs.js

@@ -10,12 +10,28 @@ var paginator = require('primereact/paginator');
 var virtualscroller = require('primereact/virtualscroller');
 var overlayservice = require('primereact/overlayservice');
 var ripple = require('primereact/ripple');
+var check = require('primereact/icons/check');
+var times = require('primereact/icons/times');
+var pencil = require('primereact/icons/pencil');
+var chevrondown = require('primereact/icons/chevrondown');
+var chevronright = require('primereact/icons/chevronright');
+var bars = require('primereact/icons/bars');
 var button = require('primereact/button');
 var csstransition = require('primereact/csstransition');
 var dropdown = require('primereact/dropdown');
 var inputtext = require('primereact/inputtext');
 var portal = require('primereact/portal');
+var filter = require('primereact/icons/filter');
+var filterslash = require('primereact/icons/filterslash');
+var trash = require('primereact/icons/trash');
+var plus = require('primereact/icons/plus');
 var tooltip = require('primereact/tooltip');
+var sortalt = require('primereact/icons/sortalt');
+var sortamountdown = require('primereact/icons/sortamountdown');
+var sortamountupalt = require('primereact/icons/sortamountupalt');
+var spinner = require('primereact/icons/spinner');
+var arrowdown = require('primereact/icons/arrowdown');
+var arrowup = require('primereact/icons/arrowup');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -231,7 +247,7 @@ var ColumnBase = {
     resizeable: true,
     rowEditor: false,
     rowReorder: false,
-    rowReorderIcon: 'pi pi-bars',
+    rowReorderIcon: null,
     rowSpan: null,
     selectionMode: null,
     showAddButton: true,
@@ -264,10 +280,11 @@ var DataTableBase = {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
     breakpoint: '960px',
+    checkIcon: null,
     cellClassName: null,
     cellSelection: false,
     className: null,
-    collapsedRowIcon: 'pi pi-chevron-right',
+    collapsedRowIcon: null,
     columnResizeMode: 'fit',
     compareSelectionBy: 'deepEquals',
     contextMenuSelection: null,
@@ -282,7 +299,7 @@ var DataTableBase = {
     editingRows: null,
     emptyMessage: null,
     expandableRowGroups: false,
-    expandedRowIcon: 'pi pi-chevron-down',
+    expandedRowIcon: null,
     expandedRows: null,
     exportFilename: 'download',
     exportFunction: null,
@@ -305,7 +322,7 @@ var DataTableBase = {
     isDataSelectable: null,
     lazy: false,
     loading: false,
-    loadingIcon: 'pi pi-spinner',
+    loadingIcon: null,
     metaKeySelection: true,
     multiSortMeta: null,
     onAllRowsSelect: null,
@@ -353,10 +370,15 @@ var DataTableBase = {
     removableSort: false,
     reorderableColumns: false,
     reorderableRows: false,
+    reorderIndicatorDownIcon: null,
+    reorderIndicatorUpIcon: null,
     resizableColumns: false,
     responsiveLayout: 'scroll',
     rowClassName: null,
     rowEditValidator: null,
+    rowEditorCancelIcon: null,
+    rowEditorInitIcon: null,
+    rowEditorSaveIcon: null,
     rowExpansionTemplate: null,
     rowGroupFooterTemplate: null,
     rowGroupHeaderTemplate: null,
@@ -379,6 +401,7 @@ var DataTableBase = {
     showSelectionElement: null,
     size: 'normal',
     sortField: null,
+    sortIcon: null,
     sortMode: 'single',
     sortOrder: null,
     stateKey: null,
@@ -462,8 +485,14 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled,
     'p-focus': focusedState
   });
-  var iconClassName = utils.classNames('p-checkbox-icon', {
-    'pi pi-check': props.checked
+  var iconClassName = 'p-checkbox-icon';
+  var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+    className: iconClassName
+  }) : null;
+  var checkIcon = utils.IconUtils.getJSXIcon(icon, {
+    className: iconClassName
+  }, {
+    props: props
   });
   var tabIndex = props.disabled ? null : '0';
   return /*#__PURE__*/React__namespace.createElement("div", {
@@ -478,9 +507,7 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     onFocus: onFocus,
     onBlur: onBlur,
     "aria-label": props.ariaLabel
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  })));
+  }, checkIcon));
 });
 RowCheckbox.displayName = 'RowCheckbox';
 
@@ -546,8 +573,8 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
 });
 RowRadioButton.displayName = 'RowRadioButton';
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   var _React$useState = React__namespace.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -625,7 +652,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
-    return _objectSpread$7({
+    return _objectSpread$8({
       originalEvent: event
     }, params);
   };
@@ -663,7 +690,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     var callbackParams = getCellCallbackParams(event);
     var newRowData = editingRowDataState;
     var newValue = resolveFieldData(newRowData);
-    var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
+    var params = _objectSpread$8(_objectSpread$8({}, callbackParams), {}, {
       newRowData: newRowData,
       newValue: newValue
     });
@@ -729,7 +756,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$7({}, styleObjectState);
+      var styleObject = _objectSpread$8({}, styleObjectState);
       var align = getColumnProp('alignFrozen');
       if (align === 'right') {
         var right = 0;
@@ -751,7 +778,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var editorCallback = function editorCallback(val) {
-    var editingRowData = _objectSpread$7({}, editingRowDataState);
+    var editingRowData = _objectSpread$8({}, editingRowDataState);
     editingRowData[field] = val;
     setEditingRowDataState(editingRowData);
 
@@ -950,7 +977,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   React__namespace.useEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       var callbackParams = getCellCallbackParams();
-      var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
+      var params = _objectSpread$8(_objectSpread$8({}, callbackParams), {}, {
         editing: editingState,
         editingKey: editingKey
       });
@@ -1039,39 +1066,47 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         checked: props.selected,
         onChange: onCheckboxChange,
         tabIndex: props.tabIndex,
-        ariaLabel: label
+        ariaLabel: label,
+        checkIcon: props.checkIcon
       }));
     } else if (rowReorder) {
       var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
         rowIndex: props.rowIndex,
         props: props.tableProps
       }) : true;
-      content = showReorder && /*#__PURE__*/React__namespace.createElement("i", {
-        className: utils.classNames('p-datatable-reorderablerow-handle', getColumnProp('rowReorderIcon'))
+      var rowReorderIconClassName = 'p-datatable-reorderablerow-handle';
+      var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, {
+        className: rowReorderIconClassName
+      });
+      content = showReorder && utils.IconUtils.getJSXIcon(rowReorderIcon, {
+        className: rowReorderIconClassName
+      }, {
+        props: props
       });
     } else if (expander) {
-      var iconClassName = utils.classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
+      var iconProps = {
+        className: 'p-row-toggler-icon',
+        'aria-hidden': true
+      };
+      var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
+      var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$8({}, iconProps), {
+        props: props
+      });
       var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
       var _ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
       var _ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
       var _label = "".concat(props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
       var expanderProps = {
         onClick: onRowToggle,
-        className: 'p-row-toggler p-link',
-        iconClassName: iconClassName
+        className: 'p-row-toggler p-link'
       };
-      content = /*#__PURE__*/React__namespace.createElement("button", {
-        className: expanderProps.className,
-        onClick: expanderProps.onClick,
+      content = /*#__PURE__*/React__namespace.createElement("button", _extends({}, expanderProps, {
         type: "button",
         "aria-expanded": props.expanded,
         "aria-controls": ariaControls,
         tabIndex: props.tabIndex,
         "aria-label": _label
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: expanderProps.iconClassName,
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }), togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       if (body) {
         expanderProps['element'] = content;
         content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
@@ -1085,15 +1120,37 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     } else if (isRowEditor && rowEditor) {
       var rowEditorProps = {};
+      var rowEditorSaveIconClassName = 'p-row-editor-save-icon',
+        rowEditorCancelIconClassName = 'p-row-editor-cancel-icon',
+        rowEditorInitIconClassName = 'p-row-editor-init-icon';
+      var rowEditorSaveIcon = utils.IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+        className: rowEditorSaveIconClassName
+      }), {
+        className: rowEditorSaveIconClassName
+      }, {
+        props: props
+      });
+      var rowEditorCancelIcon = utils.IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, {
+        className: rowEditorCancelIconClassName
+      }), {
+        className: rowEditorCancelIconClassName
+      }, {
+        props: props
+      });
+      var rowEditorInitIcon = utils.IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React__namespace.createElement(pencil.PencilIcon, {
+        className: rowEditorInitIconClassName
+      }), {
+        className: rowEditorInitIconClassName
+      }, {
+        props: props
+      });
       if (editingState) {
         rowEditorProps = {
           editing: true,
           onSaveClick: onRowEditSave,
           saveClassName: 'p-row-editor-save p-link',
-          saveIconClassName: 'p-row-editor-save-icon pi pi-fw pi-check',
           onCancelClick: onRowEditCancel,
-          cancelClassName: 'p-row-editor-cancel p-link',
-          cancelIconClassName: 'p-row-editor-cancel-icon pi pi-fw pi-times'
+          cancelClassName: 'p-row-editor-cancel p-link'
         };
         content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
@@ -1101,23 +1158,18 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: rowEditorProps.saveIconClassName
-        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
+        }, rowEditorSaveIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
           name: "row-cancel",
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: rowEditorProps.cancelIconClassName
-        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+        }, rowEditorCancelIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
       } else {
         rowEditorProps = {
           editing: false,
           onInitClick: onRowEditInit,
-          initClassName: 'p-row-editor-init p-link',
-          initIconClassName: 'p-row-editor-init-icon pi pi-fw pi-pencil'
+          initClassName: 'p-row-editor-init p-link'
         };
         content = /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
@@ -1125,9 +1177,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: rowEditorProps.initIconClassName
-        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, rowEditorInitIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       if (body) {
         rowEditorProps['element'] = content;
@@ -1192,8 +1242,8 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
 });
 BodyCell.displayName = 'BodyCell';
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1411,7 +1461,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
         newData = e.newData;
       if (dataKey) {
         var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(data, dataKey));
-        editingRows = props.editingRows ? _objectSpread$6({}, props.editingRows) : {};
+        editingRows = props.editingRows ? _objectSpread$7({}, props.editingRows) : {};
         if (!isEditing) {
           delete editingRows[dataKeyValue];
           // if the key value was changed, stop editing for the new key value too
@@ -1527,6 +1577,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
           expanded: props.expanded,
           expandedRowIcon: props.expandedRowIcon,
           collapsedRowIcon: props.collapsedRowIcon,
+          checkIcon: props.checkIcon,
           virtualScrollerOptions: props.virtualScrollerOptions
         });
       }
@@ -1573,6 +1624,8 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
 });
 BodyRow.displayName = 'BodyRow';
 
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
   var onClick = function onClick(event) {
     props.onClick({
@@ -1580,7 +1633,14 @@ var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
       data: props.rowData
     });
   };
-  var iconClassName = utils.classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
+  var iconProps = {
+    className: 'p-row-toggler-icon',
+    'aria-hidden': true
+  };
+  var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
+  var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$6({}, iconProps), {
+    props: props
+  });
   var label = props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel');
   return /*#__PURE__*/React__namespace.createElement("button", {
     type: "button",
@@ -1588,10 +1648,7 @@ var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
     className: "p-row-toggler p-link",
     tabIndex: props.tabIndex,
     "aria-label": label
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName,
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+  }, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
 });
 RowTogglerButton.displayName = 'RowTogglerButton';
 
@@ -2447,6 +2504,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         expanded: expanded,
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon,
+        checkIcon: props.checkIcon,
         rowClassName: props.rowClassName,
         virtualScrollerOptions: props.virtualScrollerOptions
       });
@@ -3085,6 +3143,13 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
   };
   var createMenuButton = function createMenuButton() {
+    var iconProps = {
+      'aria-hidden': true
+    };
+    var icon = props.columnFilterIcon || /*#__PURE__*/React__namespace.createElement(filter.FilterIcon, iconProps);
+    var columnFilterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+      props: props
+    });
     if (showMenuButton()) {
       var _className = utils.classNames('p-column-filter-menu-button p-link', {
         'p-column-filter-menu-button-open': overlayVisibleState,
@@ -3100,14 +3165,18 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
         onClick: toggleMenu,
         onKeyDown: onToggleButtonKeyDown,
         "aria-label": label
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: "pi pi-filter-icon pi-filter",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }, columnFilterIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     }
     return null;
   };
   var createClearButton = function createClearButton() {
+    var iconProps = {
+      'aria-hidden': true
+    };
+    var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(filterslash.FilterSlashIcon, iconProps);
+    var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+      props: props
+    });
     if (getColumnProp('showClearButton') && props.display === 'row') {
       var _className2 = utils.classNames('p-column-filter-clear-button p-link', {
         'p-hidden-space': !hasRowFilter()
@@ -3118,10 +3187,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
         type: "button",
         onClick: clearFilter,
         "aria-label": clearLabel
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: "pi pi-filter-slash",
-        "aria-hidden": "true"
-      }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }, filterClearIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     }
     return null;
   };
@@ -3195,7 +3261,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
       var removeRuleLabel = removeRuleButtonLabel();
       return /*#__PURE__*/React__namespace.createElement(button.Button, {
         type: "button",
-        icon: "pi pi-trash",
+        icon: props.filterRemoveIcon || /*#__PURE__*/React__namespace.createElement(trash.TrashIcon, null),
         className: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
         onClick: function onClick() {
           return removeConstraint(index);
@@ -3227,7 +3293,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
       }, /*#__PURE__*/React__namespace.createElement(button.Button, {
         type: "button",
         label: addRuleLabel,
-        icon: "pi pi-plus",
+        icon: props.filterAddIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, null),
         className: "p-column-filter-add-button p-button-text p-button-sm",
         onClick: addConstraint
       }));
@@ -3372,8 +3438,14 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled,
     'p-focus': focusedState
   });
-  var iconClassName = utils.classNames('p-checkbox-icon', {
-    'pi pi-check': props.checked
+  var iconClassName = 'p-checkbox-icon';
+  var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+    className: iconClassName
+  }) : null;
+  var checkIcon = utils.IconUtils.getJSXIcon(icon, {
+    className: iconClassName
+  }, {
+    props: props
   });
   var tabIndex = props.disabled ? null : 0;
   return /*#__PURE__*/React__namespace.createElement("div", {
@@ -3387,9 +3459,7 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  })));
+  }, checkIcon));
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
 
@@ -3445,8 +3515,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     var sorted = _ref.sorted,
       sortOrder = _ref.sortOrder;
     if (getColumnProp('sortable')) {
-      var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
-      if (sortIcon === 'pi-sort-amount-down') return 'descending';else if (sortIcon === 'pi-sort-amount-up-alt') return 'ascending';else return 'none';
+      if (sorted && sortOrder < 0) return 'descending';else if (sorted && sortOrder > 0) return 'ascending';else return 'none';
     }
     return null;
   };
@@ -3588,11 +3657,22 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     var sorted = _ref2.sorted,
       sortOrder = _ref2.sortOrder;
     if (getColumnProp('sortable')) {
-      var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
-      var className = utils.classNames('p-sortable-column-icon pi pi-fw', sortIcon);
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: className
+      var iconClassName = 'p-sortable-column-icon';
+      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, {
+        className: iconClassName
+      }) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, {
+        className: iconClassName
+      }) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, {
+        className: iconClassName
+      });
+      var sortIcon = utils.IconUtils.getJSXIcon(props.sortIcon || icon, {
+        className: iconClassName
+      }, {
+        props: props,
+        sorted: sorted,
+        sortOrder: sortOrder
       });
+      return sortIcon;
     }
     return null;
   };
@@ -3754,6 +3834,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
         groupRowsBy: props.groupRowsBy,
         groupRowSortField: props.groupRowSortField,
         sortMode: props.sortMode,
+        sortIcon: props.sortIcon,
         sortField: props.sortField,
         sortOrder: props.sortOrder,
         multiSortMeta: props.multiSortMeta,
@@ -5100,12 +5181,19 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   });
   var createLoader = function createLoader() {
     if (props.loading) {
-      var iconClassName = utils.classNames('p-datatable-loading-icon pi-spin', props.loadingIcon);
+      var iconClassName = 'p-datatable-loading-icon';
+      var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
+        className: iconClassName,
+        spin: true
+      });
+      var loadingIcon = utils.IconUtils.getJSXIcon(icon, {
+        className: iconClassName
+      }, {
+        props: props
+      });
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datatable-loading-overlay p-component-overlay"
-      }, /*#__PURE__*/React__namespace.createElement("i", {
-        className: iconClassName
-      }));
+      }, loadingIcon);
     }
     return null;
   };
@@ -5144,6 +5232,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
       sortMode: props.sortMode,
       sortField: sortField,
+      sortIcon: props.sortIcon,
       sortOrder: sortOrder,
       multiSortMeta: multiSortMeta,
       groupRowsBy: props.groupRowsBy,
@@ -5242,6 +5331,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       showRowReorderElement: props.showRowReorderElement,
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
+      checkIcon: props.checkIcon,
       rowClassName: props.rowClassName,
       virtualScrollerOptions: options,
       isVirtualScrollerDisabled: true
@@ -5315,6 +5405,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       showRowReorderElement: props.showRowReorderElement,
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
+      checkIcon: props.checkIcon,
       rowClassName: props.rowClassName,
       virtualScrollerContentRef: contentRef,
       virtualScrollerOptions: options,
@@ -5441,15 +5532,25 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
         position: 'absolute',
         display: 'none'
       };
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", {
-        ref: reorderIndicatorUpRef,
-        className: "pi pi-arrow-down p-datatable-reorder-indicator-up",
-        style: style
-      }), /*#__PURE__*/React__namespace.createElement("span", {
-        ref: reorderIndicatorDownRef,
-        className: "pi pi-arrow-up p-datatable-reorder-indicator-down",
-        style: style
-      }));
+      var reorderIndicatorUpProps = {
+        className: 'p-datatable-reorder-indicator-up',
+        style: _objectSpread({}, style)
+      };
+      var reorderIndicatorUpIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React__namespace.createElement(arrowdown.ArrowDownIcon, null), undefined, {
+        props: props
+      });
+      var reorderIndicatorDownProps = {
+        className: 'p-datatable-reorder-indicator-down',
+        style: _objectSpread({}, style)
+      };
+      var reorderIndicatorDownIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React__namespace.createElement(arrowup.ArrowUpIcon, null), undefined, {
+        props: props
+      });
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", _extends({
+        ref: reorderIndicatorUpRef
+      }, reorderIndicatorUpProps), reorderIndicatorUpIcon), /*#__PURE__*/React__namespace.createElement("span", _extends({
+        ref: reorderIndicatorDownRef
+      }, reorderIndicatorDownProps), reorderIndicatorDownIcon));
     }
     return null;
   };