MUI 如何更改 TablePagination 组件内的图标？

Question

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

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

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.

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

Here is the link to the sandbox for this example.

Answer 1

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

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