Search code examples
reactjsmaterial-uigoogle-material-iconsmaterial-table

How to change icon into text in material-ui-table component

In material-table row can be added by clicking on + icon on top right corner. I want to replace that icon with text like "ADD ROW". But material-table accept the icon object and there is not other prop to do it. Is there any way I can do it? I am using material-table editable feature https://material-table.com/#/docs/features/editable

I tried few things like

1) extracting the style class from inspect element and changing it but it effects all other icons. There is no particular class just for add icon.

2) I tried to extend the class of material-table into my component and changing the back-end code but that also didn't worked.

Material table Image

Solution

  • Material table simply renders whatever gets returned in the icon prop for each key.

    You can simply use the icons prop like this:

    icons={{Add: () => 'Add Row'}}

    This will render 'Add Row' in the place of the icon.