React material-table: Change tree expand icon

0
votes

I am using Material-table and especially Tree-data: https://material-table.com/#/docs/features/tree-data.

As I am implementing the exact example I cannot receive my arrow icon. It is like:

enter image description here

Could you tell me what I should pass into icons'object so it could render the right arrow + the down arrow when it is opened? Previous I had the same problem with sorting arrow but later I found that I should pass SortArrow to icons property of MaterialTable component.

2
javascriptreactjsmaterial-uimaterial-designmaterial-table

2 Answers

0
votes

Try importing the icons stylesheet to your index.html like below:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

For more details on importing icons (alternate ways), you can check the following link: https://material-ui.com/components/icons/#installation

And as for how to render specific icons, you can check the following link: https://material-ui.com/components/material-icons/#material-icons

(P.S. As far as I recall, there are default icons already set to material-table. So unless you need to customize icons, importing only the stylesheet should suffice.)

0
votes

After some researches I found that I can put DetailPanel in my icons property:

import { ChevronRight } from "@material-ui/icons";

    icons={{
            DetailPanel: ChevronRight,
          }}

So this makes table like:

enter image description here