'How to add custom close icon for Alert component in Material UI, globally

We can globally customise the severity icons shown in the Alert component through the theme:

  MuiAlert: {
    defaultProps: {
      iconMapping: {
        info: <Info/>,
        success: <Success/>,
        warning: <Warning>,
        error: <Error/>,
      }
    },
    styleOverrides: {
    ...
    }

But, is there a way to do the same for the close icon, the one displayed when the OnClose prop is defined?

  /**
   * Callback fired when the component requests to be closed.
   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
   * @param {React.SyntheticEvent} event The event source of the callback.
   */
  onClose?: (event: React.SyntheticEvent) => void;

I know the alternative solution is to create my own styled component derived from the Alert component and set the my custom close icon, but would like to avoid that and see if it is possible through the theme components customisation.

Otherwise I think it would be a nice to have and maybe should open a request for that.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source