how to change material table action fields icon
Asked Answered
M

3

4
        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)
          }
        ]}
Melodize answered 7/10, 2019 at 10:1 Comment(1)
Consider adding context and description and format your question properly.Demantoid
D
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)
},

// ...
Demantoid answered 8/10, 2019 at 5:57 Comment(3)
how do it? give me example please tyMelodize
IT should be something like this icon:() => <Edit /> other wise it will give an errorSulk
Thanks, was a typo basically.Demantoid
D
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
            },
          },
        ]}
     />
Doublebank answered 30/5, 2021 at 9:1 Comment(0)
M
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

Murry answered 22/12, 2021 at 16:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.