how to change material table action fields icon

Question

        actions={[
          {
            icon: 'edit',
            tooltip: 'Edit User',
            onClick: (event, rowData) => alert('You are editing ' + rowData.name)
          },
          {
            icon: 'delete',
            tooltip: 'Delete User',
            onClick: (event, rowData) => confirm('You want to delete ' + rowData.name)
          }
        ]}

Answer 1

You can change the icon of the action by supplying arbitrary React component as the value for icon prop.

icon string or () => ReactElement - Icon of button from material icons or custom component

So instead of edit or delete, add a component of a desired icon. Something like:

import { Edit } from '@material-ui/icons'

// ...

{
  icon: () => <Edit />,
  tooltip: 'Edit User',
  onClick: (event, rowData) => alert('You are editing ' + rowData.name)
},

// ...