[alert] iconMapping should also support variant
Open
@siriwatknp is already working on this.
Since Sep 2, 2025.
scope: alert
type: new feature
waiting for 👍
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Summary
The current iconMapping prop on the Alert only supports passing in severity.
A nested iconMapping prop could enable passing in both severity and variant.
Examples
...
iconMapping: {
success: {
filled: CheckmarkOutline,
outlined: Checkmark,
standard: Checkmark,
},
info: {
filled: InfoOutline,
outlined: Info,
standard: Info,
},
warning: {
filled: AlertOutline,
outlined: Alert,
standard: Alert,
},
error: {
filled: ErrorOutline,
outlined: Error,
standard: Error,
},
},
...
<IconSlot {...iconSlotProps}>
{icon || iconMapping[severity][variant] || iconMapping[severity] || defaultIconMapping[severity]}
</IconSlot>
Motivation
I'm trying to use only themeOverrides to fully theme the Alerts we have designed, including the icons.
Search keywords: alert, icon, iconMapping, variant
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.