MUI how can I change the icon inside the TablePagination component?

Admin 1
Viewed 659

In my React project, I am using MUI component called TablePagination

TablePagination component is nested inside of the Table component like the picture below.

enter image description here

See how the dropdown button has a solid arrow pointing down. How can I change this to a different SVG icon.

I want the new TablePagination to have an arrow icon from the below picture.

enter image description here

https://codesandbox.io/s/ijm5r?file=/demo.js

Here is the link to the sandbox for this example.

material-ui reactjs svg javascript
1 Answers

You can add a custom icon of the Select inside TablePagination like below:

<TablePagination
  SelectProps={{
    IconComponent: KeyboardArrowDownIcon,
  }}

Codesandbox Demo

user_94494260
Related