How to change default sorting icon on table header column on React Material-Table?

Question

Can I change the default sorting icon on React Material-Table table header column ? ex. I want to change asc sorting icon to ArrowDownward and desc sorting icon to ArrowUpward. I try to set SortArrow icons props on MaterialTable but its show on every table header columns even its not active sorting column. Please help.

Material-Table

Code:

<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}

Answer 1

You have to forward the refs like this:

import React, { forwardRef } from 'react';  
...
<MaterialTable>  
     icons={{ SortArrow: forwardRef((props, ref) => <ArrowDownwardIcon{...props} ref={ref}/>)}}
<MaterialTable> 

This will pass the required props to your custom icon and it will work.

Answer 2

You can simply pass your component as a value

     icons={{
              SortArrow: ArrowDropUpIcon,
           }}