REACTJs: How to change color and size of edit and delete icon in Material-Table?

Question

I am using Material-Table in my project and i want to change the color and size of edit and delete icon. How to achieve that? I am attaching screenshot with this question.

function Editable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
 
  ]);

  const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
  ]);

  return (
    <MaterialTable
      title="Editable Preview"
      columns={columns}
      data={data}
      editable={{
        //Code of add, update
      }}
    />
  )
}

Answer 1

You can create your own with the actions prop then style them however you want

actions={[
             {
               icon: () => (
                 <Edit fontSize="large"
                   className={classes.edit}
                 />
               ),
               tooltip: 'Edit Item',
               onClick: (event, rowData) => edit(rowData)
             },
             {
               icon: () => (
                 <Delete fontSize="large"
                   className={classes.delete}
                 />
               ),
               tooltip: 'Delete Item',
               onClick: (event, rowData) => delete(rowData),
             },
           ]}

Answer 2

use tableIcons .

const tableIcons = {<br/>
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} style={{fontSize: 18}}/>),<br/>
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} style={{fontSize: 18}}/>),<br/>
  };<br/>
<br/>

<MaterialTable icons={tableIcons} ... />

Answer 3

Material-table allows you to override a render of any column, you could specify directly in your columns the action items and further call any and all onClick events you would require.

 const columns = [
        {
          render: rowData => (
            <>
              <IconButton>
                <EditIcon style={{ color: 'green' }} />
              </IconButton>
              <IconButton>
                <DeleteIcon style={{ color: 'yellow' }} />
              </IconButton>
            </>
          ),
          sorting: false,
        },
      ];