Material-ui: Can’t use IconComponent to set a custom icon for TableSortLabel Components.

[jennajiang777]

• [ ] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Still get the default ArrowDownward icon

Expected Behavior 🤔

Instead of rendering default ArrowDownward icon, I want it to render ArrowDropDown icon

Steps to Reproduce 🕹

Steps:

1. imported ArrowDropDown at the top of the file: import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
2. Passed in ArrowDropDown to IconComponent within the TableSortLabel component:

<TableSortLabel
  IconComponent={ArrowDropDown}
  active={ currentSort.field === (field.props.sortBy || field.props.source) }
  direction={currentSort.order === 'ASC' ? 'asc' : 'desc'}
  data-sort={field.props.sortBy || field.props.source}
  onClick={updateSort}
  classes={classes}
>

1. run yarn start
   There is the Sandbox link: https://codesandbox.io/embed/create-react-app-oupku
   
   

   Context 🔦

I am trying to change the default ArrowDownward icon by setting IconComponent to ArrowDropDown icon, but it doesn't work, I still get the default ArrowDownward icon in the Chrome

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| @material-ui/icons | v1.0.0 |
| Material-UI | v1.4.0 |
| React | v16.8.4 |
| Browser | Chrome |

[joshwooding]

Can you provide a minimal reproducible example please. Potentially a codesandbox

[oliviertassinari]

Material-UI | v1.4.0

This feature was only added in v3.0.0.

[jennajiang777]

Can you provide a minimal reproducible example please. Potentially a codesandbox

Sorry I didn't take a closer look at the step.
There is the Sandbox link:
https://codesandbox.io/embed/create-react-app-oupku

[oliviertassinari]

We only provide (free) support for the last active version. You need to upgrade to v3.0.0 or more recent version.