how to change material table action fields icon

user_11982161 0
Viewed 5910
        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)
          }
        ]}
material-table reactjs
3 Answers

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)
},

// ...
user_1896730

Simple Sample Code like this:

<MaterialTable
  // other props
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) => {
        // Do save operation
      }
    }
  ]}
/>

if you use somethimg like FontawesomeIcon, this sample is good:

    <MaterialTable
      // other props 
      actions={[
          {
            icon: () => <FontAwesomeIcon icon={faSave} />,
            tooltip: 'Save User',
            onClick: (event, rowData) => {
              // Do save operation
            },
          },
        ]}
     />
user_64987920

In my case I imported the icon

import VisibilityIcon from '@material-ui/icons/Visibility';

and simply passed it like this

actions = {
  [{
    icon: VisibilityIcon,
    tooltip: 'View'
    onClick: (event, rowData) => {
         // Your required onclick functionality
    }
  }]
}

Hope this helps... have a nice day

user_133017510
Related