Material-table: Action 'iconProps' not affecting the icon

[sonofabear]

I'm trying to change the actions icon colors using the iconProps in the actions object. I have tried several different ways and nothing I do changes the look of the icons. Here's my code:

`

                icons={tableIcons}
                components={{
                    Container: props => <div style={{ background: '#fff' }}>{props.children}</div>
                }}
                onRowClick={onRowClicked}
                options={
                    {
                        selection: false,
                        pageSize: 20,
                        pageSizeOptions: [10, 20, 100],
                        filtering: true,
                        columnsButton: true,
                        exportButton: true,
                        filterCellStyle: { backgroundColor: '#fcfcfc' },
                        grouping: true,
                        actionsColumnIndex: -1,
                        toolbar: true
                    }
                }
                actions={
                        icon: tableIcons['AssignmentTurnedInOutlined'],
                        tooltip: 'Verify Issue',
                        onClick: (event, rowData) => { /* Do verify operation */ },
                        iconProps: { color: 'primary' },
                    }
                columns={[
                    { title: 'Issue Name', field: 'id' },
                    { title: 'Date', field: 'date', render: rowData => (<div >{moment(rowData.date).fromNow()}</div>) },
                    { title: 'Status', field: 'status' },
                    { title: 'Component', field: 'component' },
                    { title: 'Downtime', field: 'downtime' },
                ]}
                data={issueList}
                title="Issue List"
                localization={{ header: { actions: "Verify" } }}
            />`

[jonasanx]

Try this

  const actions = [
    {
      icon: () => <AddBox />,
      tooltip: 'Add',
      isFreeAction: true,
      onClick: openDialogAdd
    }
  ]

[Sheing]

I can confirm that iconProps is not working for me either.

[asifkabani]

Any update on this? Or does anyone know how I can change the icon color if I can't use props. iconProps does not work for me either.

[usahai]

I managed to get it working like this:

actions={[
  {
      icon: tableIcons.AddCircle,
      tooltip: 'Add '
      isFreeAction: true,
      onClick: (event) => console.log("Custom button works!")
  }
]}

AddCircle was added to the tableIcons import.

EDIT: In hindsight, I should have described how I'm importing them.

import React, { forwardRef } from "react";
import { AddCircle } from "@material-ui/icons";

const iconColor = "#ffffff";
export const tableIcons = {
    AddCircle: forwardRef((props, ref) => <AddCircle {...props} ref={ref} style={{ fill: iconColor }} />),
};

[geohuz]

I have the same issue too, none of the solution claimed above work.

[Pacheco95]

I managed to get it working like this:

actions={[
  {
      icon: tableIcons.AddCircle,
      tooltip: 'Add '
      isFreeAction: true,
      onClick: (event) => console.log("Custom button works!")
  }
]}

AddCircle was added to the tableIcons import.

EDIT: In hindsight, I should have described how I'm importing them.

import React, { forwardRef } from "react";
import { AddCircle } from "@material-ui/icons";

const iconColor = "#ffffff";
export const tableIcons = {
    AddCircle: forwardRef((props, ref) => <AddCircle {...props} ref={ref} style={{ fill: iconColor }} />),
};

This solution did not fix the problem that iconProps is not working

[Pacheco95]

The problem still persists.

import MaterialTable from "material-table";
import React, { forwardRef } from "react";
import { Eye } from "react-feather";

// prettier-ignore
const tableIcons = {
  Show: forwardRef((props, ref) => <Eye {...props} ref={ref} />),
};

export default function AppUsersListingTable() {
  const [state, setState] = React.useState({
    columns: [
      { title: "Name", field: "name" },
      { title: "Surname", field: "surname" },
      { title: "Birth Year", field: "birthYear", type: "numeric" },
      {
        title: "Birth Place",
        field: "birthCity",
        lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
      },
    ],
    data: [
      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
      {
        name: "Zerya Betül",
        surname: "Baran",
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });

  return (
    <MaterialTable
      icons={tableIcons}
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      actions={[
        {
          icon: tableIcons.Show,
          iconProps: {
            color: "#f0f",
          },
        },
      ]}
    />
  );
}

The color prop didn't work

I'm using material-table v1.69.0

[hdtp]

The issue comes from m-table-action.js, it does not pass iconProps if action.icon is a component.

const icon =
  typeof action.icon === "string" ? (
    <Icon {...action.iconProps}>{action.icon}</Icon>
  ) : typeof action.icon === "function" ? (
    action.icon({ ...action.iconProps, disabled: disabled })
  ) : (
    <action.icon /> // I think this should be <action.icon {...action.iconProps} />
  );

There is an easy workaround.
Create a new tableIcon and set the props there, or you ignore forwardRef making the icon a function so iconProps will be applied.

import DeleteForever from '@material-ui/icons/DeleteForever';

const tableIcons = {
  Delete: forwardRef((props, ref) => <DeleteForever {...props} ref={ref} />),
  DeleteErrorColor: forwardRef((props, ref) => <DeleteForever {...props} color="error" ref={ref} />),
  DeleteGreen: forwardRef((props, ref) => <DeleteForever {...props} style={{ color: '#00ff00' }} ref={ref} />),
  DeleteWorkaround: (props, ref) => <DeleteForever {...props} ref={ref} />, // now it's a function and iconProps works
};

<MaterialTable
  icons={MaterialTableIcons}
  actions={[
    {
      icon: MaterialTableIcons.Delete, // try DeleteErrorColor, DeleteGreen or DeleteWorkaround
    },
  ]}
/>

[asok-mirror]

I managed to get it working like this:

actions={[
  {
      icon: tableIcons.AddCircle,
      tooltip: 'Add '
      isFreeAction: true,
      onClick: (event) => console.log("Custom button works!")
  }
]}

AddCircle was added to the tableIcons import.
EDIT: In hindsight, I should have described how I'm importing them.

import React, { forwardRef } from "react";
import { AddCircle } from "@material-ui/icons";

const iconColor = "#ffffff";
export const tableIcons = {
    AddCircle: forwardRef((props, ref) => <AddCircle {...props} ref={ref} style={{ fill: iconColor }} />),
};

This solution did not fix the problem that iconProps is not working

Addon: CSS class can also be applied as below

Add: React.forwardRef),

.fill-addButton {
color: $colorGreen;
}