How Can I Change The Color Of Material-table Icons Of Onrowadd, Onrowupdate, Onrowdelete?

I tried to the material-table the library for basic crud operation. By using onRowAdd, onRowUpdate, onRowDelete, I get the icons for the same but I would like to know that how can

Solution 1:

You can override the icons and provide custom styles by setting the icons props. It accepts an object where the key is a type of operation (Add, Edit, Delete,...) and the value is an icon component. For reference, see the all-props section here.

<MaterialTable
  {...props}
  icons={{
    Edit: () =><EditIconstyle={{color: "orange" }} />,
    Delete: () =><DeleteIconstyle={{color: "red" }} />
  }}
>

Live Demo

Solution 2:

It's Simple. Inspect on the page and Select the Icon and Copy its style Name in Styles Tab.

Now, Go to App.css file and Create New Style with the icon style name shown on Inspect-styles area and there you can enter your desired color.

It will work.

In your App.css File, Add below code

.MuiIconButton-colorInherit {
    color: red;
}

change to any color