Change action menu icon in MUI datagrid

Question

I am using the community version of @mui/x-data-grid.

I have this column defintion:

const columns = [
  {
    field: "actions",
    type: "actions",
    width: 100,
    getActions: (cell) => [
      <GridActionsCellItem
        label={strings.addSome}
        onClick={() => openAddModal(cell.row)}
        showInMenu
      />,
      <GridActionsCellItem
        label={strings.pickSome}
        onClick={() => openPickModal(cell.row)}
        showInMenu
      />,
      <GridActionsCellItem
        label={strings.remove}
        onClick={() => openRemoveModal(cell.row)}
        showInMenu
      />,
      <GridActionsCellItem
        label={strings.modifyQty}
        onClick={renderComingSoon}
        showInMenu
      />,
    ],
  },
];

This result in the following output:

I want to change the display icon for the action menu button, is there an option to do si?

score 0 · Answer 1 · answered Jan 24 '23 at 16:29

DataGrid component has components prop, which allows to replace almost any default component with custom one. I'm pretty sure that you need BaseButton to be like

const CustomButton = () => (
    <IconButton>
        <AnyIconFromMUIIconSet />
    </IconButton>
);

<DataGrid
    components: {
        BaseButton: CustomButton
    }
    // rest of your props

For more information about Slots please refer to DataGrid API.

score 0 · Answer 2 · answered Mar 15 '23 at 16:00

The moreActionsIcon slot is needed. To show horizontal dots instead of vertical and with a smaller size, this worked. (MUI DataGrid v5.12.1)

import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded'


    function CustomActionsIcon () {
      return (
        <MoreHorizRoundedIcon sx={{ fontSize: 25 }} />
      )
    }
    
    <DataGrid
        components={{
            MoreActionsIcon: CustomActionsIcon
         }}

Change action menu icon in MUI datagrid

2 Answers2