I’m working on implementing toast notifications in my Ionic React app, and I’d like to include a user’s avatar image on the left side of the toast. The idea is to have the avatar where the icon is usually positioned.

So far, I’ve managed to add a simple icon, but I want to replace it with a user’s profile picture. I tried adding an image directly to the icon property, but it seems that it only accepts strings for icon names or paths to SVG files. Here’s a snippet of what I have so far:

<IonToast
  isOpen={isOpen}
  message={`${notification.actor.firstName} ${notification.actor.lastName} sent you a friend request.`}
  position="top"
  duration={5000}
  onDidDismiss={() => setIsOpen(false)}
  buttons={[
    {
      side: 'start',
      icon: <img src={notification.actor.profilePicture} alt="Profile" style={{ width: '24px', height: '24px', borderRadius: '50%' }} />,
      handler: () => {}
    }
  ]}
/>

However, this doesn’t seem to work as expected since the icon property doesn’t accept JSX elements.

Is there any way to achieve this within the current capabilities of Ionic? Or perhaps any custom approach to render an image in the position of the icon? Any suggestions or workarounds would be greatly appreciated!

Thanks in advance!