How to Add a User Avatar to the Left of an Ionic Toast Notification?

Question

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!

Answer 1

You can use custom HTML in message to show any html element including images:

For Example:

in JS:

let customHTML = `
<div class="d-flex">
   <div>
      <img src="YourAvatar.png">
   </div>
   <div>
      ${notification.actor.firstName} ${notification.actor.lastName} sent you a friend request.
   </div>
</div>
`

HTML:

<IonToast
  isOpen={isOpen}
  message={customHTML} // add your HTML here
  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: () => {}
    }
  ]}
/>

But you need to enable innerHTMLTemplatesEnabled in your ionic config for this to take effect.

More in documentation: Ionic Documentaion