Skip to content

feat(mat-sort-header): Proposal — Add global token for mat-sort-header icon customization #32002

@Anton-Vladykin

Description

@Anton-Vladykin

Feature Description

Summary
Introduce a public DI token to allow apps to replace the default mat-sort-header arrow with app-provided icons/templates in a themable, accessible, and opt-in way.

API (names only)

Token: MAT_SORT_HEADER_ICONS

Config shape: MatSortHeaderIcons with optional keys default, ascending, descending (accepts TemplateRef or sanitized SVG/string)

Use Case

Image

Rationale

Avoids fragile hacks (CSS hiding + DOM mutation) and centralizes app-wide customization.

Keeps behavior backwards-compatible when token is not provided.

Theming

Encourage currentColor so icons follow app theme and runtime CSS variables.

Accessibility

Preserve aria-sort, keep icons decorative (aria-hidden="true"), document when non-decorative icons require additional labeling.

Compatibility

Token is opt-in; default behavior unchanged if not provided.

Reference
Material table styling guidelines: material.angular.dev/components/table/styling.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/sortfeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions