Material-table: How can I set styles in table icons?

[denbalestri]

I am trying to set styles but now I have to set the styles inline like this:
const tableIcons = { Edit: (props) => <div><EditIcon {...props} onClick={onClickEdit} /></div>, Add: (props) => <div style={{display: 'flex', alignItems: 'center'}}><AddBoxIcon {...props} onClick={onClickAdd} /><span style={{fontSize: 14, marginLeft: 15, fontFamily: 'Segoe UI', color: 'rgba(0, 0, 0, 0.87)'}}>{titleAddIcon}</span></div>, Export: SaveAltIcon };

but the problem is I have to set the styles inline, I want to set the styles with a className={classes.icon}
but it doesn't work.

[oze4]

Is something like this what you're after?

Live demo can be found here

import React, { useState } from "react";
import MaterialTable from "material-table";
import { makeStyles } from "@material-ui/styles";
import tableIcons from "./TableIcons.js";

const originalData = ["Rock", "Paper", "Scissors"].map(word => ({
  id: Math.floor(Math.random() * 300),
  name: word
}));

const useStyles = makeStyles({
  myEditIcon: {
    color: "red",
    fontSize: "60px",
  },
});

export default function AppTable() {
  const classes = useStyles();
  const [data, setData] = useState(originalData);

  return (
    <MaterialTable
      data={data}
      title="My Table"
      icons={{
        ...tableIcons,
        Edit: () => <tableIcons.Edit className={classes.myEditIcon} />
      }}
      columns={[
        {
          title: "Id",
          field: "id"
        },
        {
          title: "Name",
          field: "name"
        }
      ]}
      editable={{
        onRowUpdate: (newData, oldData) => {
          return new Promise((resolve, reject) => {
            resolve();
          });
        }
      }}
    />
  );
}

[newpost]

why not is Edit: