[data grid] Icon usage enhancements

Open
#47,117 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript, react
Domain
frontend

Research direction

Start with the linked StackBlitz code example and review the DataGrid icon slots for Pagination, FilterPanel, Column Selector/Menu, pinned columns, and grouping. Compare the existing naming and replacement behavior, then define the intended centralized configuration and consistent icon logic. Done means the affected icons follow one clear configuration pattern and the example demonstrates it.

Written by the indexing model from the issue text.

Description

customization: theme design: ui scope: data grid scope: system type: enhancement

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.

Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.