Material-table: The sort arrows are too big

[Jak3b0]

Describe the bug
When sorting a column, the sort arrow is too big and clipped

To Reproduce
Steps to reproduce the behavior:

1. Go to https://material-table.com/#/docs/features/sorting
2. Click on a column header
3. See error

Expected behavior
Smaller sort arrow

Screenshots

[KasparasGud]

I added the following in the theme overrides:

``` overrides: {
MuiIcon: {
root: {
fontSize: "1.4rem" // <-- Or "1.3rem", "1.2rem" If you want a smaller icon
}
}
}

[Totalbug92]

For me this fixed it:
.material-icons { inline-size: auto !important; line-height: inherit !important; }

I have a better solution below for TypeScript users

[punnadittr]

This solution does not affect other icons but you need to import ArrowUpwardIcon from @material-ui/icons:

 icons={{
        SortArrow: props => <ArrowUpwardIcon {...props} fontSize="small" />,
      }}

[Totalbug92]

icons={{
SortArrow: props => ,
}}

Dont know if this is related to typescript, but that didn't work for me. This however did:

icons={{
   SortArrow: React.forwardRef((props, ref) => <ArrowUpward {...props} fontSize="small" ref={ref}/>)
}}

with import:
import {ArrowUpward} from '@material-ui/icons'

[cargallo]

The @Totalbug92 solution works fine for typescript, but I think that this is a bug of the library and should be fixed. The project's styles do not have to affect the library behavior unless it is intentional

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.