How do I override icons in Material UI DataGrid?

We need to customize most of the icons used in the DataGrid from Material UI. Reading the very limited docs, we cannot figure out how to do that.

The documentation talks about slots (but with no explanation on how to use those). There is a icons property, but we're not sure if IconsOptions is the same as slots. Regardless, we tried the following:

      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          icons={{
            ColumnMenuIcon: AcUnit
          }}
          />
      </div>

and the following:

      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          ColumnMenuIcon={AcUnit}
          />
      </div>

To no avail. We tried using <AcUnit/> instead, but no change. Tried reading the code but that did not really help either...

What is the proper way of doing this? If that is a standard way of doing things in either React or Material UI, where can we find some documentation?

Here is a Code Sandbox.

You can find this documented here: https://material-ui.com/components/data-grid/components/#icons with the list of available icons to customize in the documentation you noted. The example shows using the components prop to customize the icons.

The following syntax works:

        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          components={{
            ColumnMenuIcon: AcUnit
          }}
        />