is there a way to edit the "edit " icon in onRowUpdate?

Question

I want to see a different icon and tooltip when I set the property editable in material-table but I can't find a way. I know that there is the possibility to override a component but nothing works. Something like this maybe...

components={{
  EditRow: props => (
    <MTableEditRow
      {...props}
      icons={{
        Edit: () => <SettingsIcon />
      }}
    />
  )
}}

Answer 1

I think there is a simpler way to achieve what you are looking for. Try this:

Import the icon component of your choice and define an object with the Edit key to override the default icon:

import Settings from "@material-ui/icons/Settings";

const tableIcons = {
  Edit: () => <Settings />
};

Then use icons props of your MT component:

<MaterialTable
        columns={tableColumns}
        data={data}
        title="Material Table - change edit icon & tooltip  "
        icons={tableIcons}
        localization={{
          body: {
            editTooltip: "Custom edit tooltip"
          }
        }}
        // other props..
/>

As seen above, use localization to set the label you need. This a sandbox with a working example, good luck!