Invalid prop `actions[0]` supplied to `MaterialTable` and fontSize='small'

Describe the bug Warning: Failed prop type: Invalid prop actions[0] supplied to MaterialTable. Can’t pass fontSize props when using string icon

To Reproduce Steps to reproduce the behavior:

1. Add actions to Material Table component Example : actions={[ { icon: 'create', tooltip: 'Add', onClick: (event, rowData) => { //Do stuff } } ]
2. Instead of a string, pass an icon component directly as the icon props import Create from ‘@material-ui/icons/Create’; Example : actions={[ { icon: Create, tooltip: 'Add', onClick: (event, rowData) => { //Do stuff } } ]
3. See error in console
4. Additionnaly, because of this in m-table-action.js {typeof action.icon === "string" ? ( <Icon {...action.iconProps} fontSize="small">{action.icon}</Icon> ) : ( <action.icon {...action.iconProps} disabled={action.disabled} /> ) } We can’t change the fontSize props if the icon is a string, for example if I set iconProps: { fontSize: 'default' } My props will be overriden by the hardcoded one (fontSize=“small”).

Expected behavior We shouldn’t get this warning. You should probably remove this fontSize props to let users customize the size.

Desktop (please complete the following information):

• Chrome (didn’t test on other platforms)
• Version 1.39.0

[oze4]

@IdkMan2 @mbrn FYI–

I FINALLY FOUND A FIX!

I was previously supplying my actions as objects like this:

actions={[{
    icon: () => <LocationCityOutlined />,
    tooltip: <Typography>ABC</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "abc")
}, {
    icon: () => <Opacity />,
    tooltip: <Typography>XYZ</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "xyz")
}]}

Changing each action to a function resolved this for me!!!

THE FIX:

actions={[
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "abc")
    }), 
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <Opacity />,
        tooltip: <Typography>XYZ</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "xyz")
    })
]}

[bableves]

@IdkMan2 @mbrn FYI–

I FINALLY FOUND A FIX!

I was previously supplying my actions as objects like this:

actions={[{
    icon: () => <LocationCityOutlined />,
    tooltip: <Typography>ABC</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "abc")
}, {
    icon: () => <Opacity />,
    tooltip: <Typography>XYZ</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "xyz")
}]}

Changing each action to a function resolved this for me!!!

THE FIX:

actions={[
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "abc")
    }), 
    rowData => ({  // <-- ***NOW A FUNCTION***
        icon: () => <Opacity />,
        tooltip: <Typography>XYZ</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "xyz")
    })
]}

It clears the warning but it doesn’t work with isFreeAction: true unfortunately.