Skip to content

[material-ui][Alert] iconMapping should also support variant #46857

@alexismo

Description

@alexismo

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

Image
...
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,
        },
      },
...

Alert.js

<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

Metadata

Metadata

Assignees

Labels

scope: alertChanges related to the alert.type: new featureExpand the scope of the product to solve a new problem.waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions