How to overwrites the ArrowDownwardIcon icon in React material ui 1.2 TableSortLabel

0
votes

I am currently working on a web app using latest material ui , I followed the official demo site https://material-ui.com/demos/tables/ using example:Sorting & Selecting, successfully added sort function in the table. What I am trying to do next is to overwrite the sort icon in header column which is ArrowDownwardIcon from the TableSortLabel source code on github https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TableSortLabel/TableSortLabel.js.

The new icon could be the 'ArrowDropDownIcon' which is used in 'Select' component (https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/Select.js) or just an outside icon.

pic link: The original sort icon

to

pic link: what I want to use

Can anyone help me here?

version: "@material-ui/core": "^1.2.0", "@material-ui/icons": "^1.1.0",

1
reactjsmaterial-ui
Did you ever figure this out?? - SasaT

1 Answers

1
votes

I think you just select the component as follows:

<TableSortLabel
  active={true} // do some validation to decide where the icon will be displayed
  direction={'asc'} // hardcoded for now
  onClick={(e: any) => {console.log("e: ", e);}}
  IconComponent={MailIcon} // <<<<<< This is what you are looking for. OR other icon, this will only show up when active is true
>
label
</TableSortLabel>