Replacing the Default Sort Icon for the Table does not appear to work as expected

[JRSoftware92]

material-react-table version

3.1.0

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

When using the icons prop of the table, I'd expect to be able to replace the Default state of the sort icons as well as everything else. When I view this functionality in the documentation, it seems this actually isn't the case - the default sort icon is not changed, although the ascending/descending ones are.

I've attached some screenshots of the docs which should be using the Font Awesome icons for sorting. It seems for Ascending/Descending sort states they do, but for the unsorted state they're still using the MUI icon.

Worth nothing:When I write my own version of this logic, this still appears to be the problem, and when I add console.log statements to the custom component being assigned to SortIcon in the icons prop, they do not appear to be called, indicating that assignment isn't being used.

Minimal, Reproducible Example - (Optional, but Recommended)

https://www.material-react-table.com/docs/guides/customize-icons#font-awesome-example

If you work with the sort icons on that link to the documentation you should see what I'm talking about. I'd expect the unsorted state to look like this (that's a link to the Font Awesome equivalent)

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

No, because I do not have time to dig into it, but I have found a workaround! It turns out the assignment actually uses the SyncAltIcon rather than the SortIcon.

So if you've run into this issue, use the following assignment for icons (if ColumnSortIcon is your custom sort icon component):

const icons: Partial<MRT_Icons> = {
  ArrowDownwardIcon: (props) => <ColumnSortIcon {...props} />,
  SyncAltIcon: (props) => <ColumnSortIcon {...props} />,
}

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[fredericbahr]

From my perspective, your "workaround" is actually the intended solution. The ArrowDownwardIcon is used to indicate that the table or column is currently being sorted, whether in ascending or descending order.

When the table or column is not in a sorting state, resulting in the display of a different icon, the SyncAltIcon is used instead.

Could you please clarify your expected behavior? In my view, the icons need to be distinct because they represent entirely different states.

[super622]

I'm using javascript.
Do we have any solution?