Icons missing when using promises

[Simon]

Describe the feature / bug 📝:

When using toast.promise, the success or error icon is not displayed after resolving the promise. I saw that you had merged a pull request that fixed this behavior but I don't know why, I can't get it to work :(((

I'm using v1.4.41

[Simon]

Okay, I just found the problem. That's some weird behavior...

This code displays the icons :

const prom = new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve({ name: 'toast' }); 
              }, 1000);
            })
          
            toast.promise(prom, {
              loading: 'Loading...',
              success: (data) => {
                return `${data.name} toast has been added`;
              },
              error: 'Error',
            });

But this code doesn't:

const prom = new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve({ name: 'toast' }); 
              }, 1000);
            })
          
            toast.promise(prom, {
              loading: 'Loading...',
              success: (data) => {
                return <>{data.name} toast has been added</>;
              },
              error: <>Error</>,
            });

[matheusg-turing]

I'm facing the same issue, but neither of suggestions above from @SimonLeclere worked for me, it only shows the text without the icon.

Also I notice that seems to still rendering the loading spinner even after showing the success message:

[Simon]

Hey, you should provide a code snippet with the description of your problem so we can try to reproduce it :)

[matheusg-turing]

Hey, sorry, it's literally the same snippet you provided; I just copied and pasted:

const prom = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ name: 'toast' })
      }, 1000)
    })

    toast.promise(prom, {
      loading: 'Loading...',
      success: (data) => {
        return `${data.name} toast has been added`
      },
      error: 'Error',
    })

Quick demo:

icon_missing_sonner.mov

I was using v1.4.1, tried to update to yours (1.4.41), and now I'm using 1.5.1, but the success icon doesn't show in any of them, even as a string or as ReactNode. I also tried to override the success icon to test (I'm using Lucide to display icons):

<Toaster theme={theme} icons={{ success: <Icon name="Magnet" /> }} />

And it works fine when I call directly toast.success, meaning I can well see the custom icon, but it still doesn't show on toast.promise.

Edit: when returning a ReactNode, it renders just the text, but when returning the string, it renders a blank space in the left (where it is supposed to show the icon) and the text in the right.

Edit 2: just tested the error as well and the toast also doesn't show the icon 🥲