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)
}
]}
Asked
Active
Viewed 7,369 times
4
-
Consider adding context and description and format your question properly. – jayarjo Oct 08 '19 at 05:54
3 Answers
4
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)
},
// ...

jayarjo
- 16,124
- 24
- 94
- 138
-
-
1IT should be something like this icon:() =>
other wise it will give an error – mzparacha Apr 16 '20 at 13:58 -
0
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
},
},
]}
/>

saeed eivazi
- 818
- 1
- 7
- 14
0
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

Shakya Karunathilake
- 495
- 2
- 6
- 13