Skip to content

[data grid] Icon usage enhancements #47117

@michelengelen

Description

@michelengelen

2. Theming – Icons

👉 (All in one) Code Example

2.1 Missing centralized replacement points

  • Some icons (e.g., Pagination) can only be replaced directly on the component, not via DataGrid slots.
  • This is inconsistent and inconvenient.

2.2 Inconsistent slot naming

FilterPanel

  • filterPanelRemoveAllIcon
  • filterPanelDeleteIcon

Mixing “Remove” and “Delete” is confusing.
💡 Suggestion: consistent naming + a single point of configuration.

Column Selector / Menu

  • columnSelectorIcon
  • columnMenuManageColumnsIcon

Both open the same menu but must be replaced separately.

Positive example:

  • quickFilterIcon — set once, used in multiple places (Toolbar search and ColumnMenu search).

2.3 Inconsistent icon logic in similar features

  • Pinned Left/Right: One icon that disappears when unpinned.
  • Grouping: Changes between “Group” and “Ungroup” icons.

💡 Suggestion: unify icon logic so similar actions use similar patterns.

Metadata

Metadata

Assignees

No one assigned

    Labels

    customization: themeHigher level theming customizability.design: uiVisual design.scope: data gridChanges related to the data grid.scope: systemThe system, the design tokens / styling foundations used across components. eg. @mui/system with MUItype: enhancementIt’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions