fix: prevent double icon render in promise toast (bug #718)

src/index.tsx

@@ -423,11 +423,11 @@ const Toast = (props: ToastProps) => {
           data-close-button
           onClick={
             disabled || !dismissible
-              ? () => {}
+              ? () => { }
               : () => {
-                  deleteToast();
-                  toast.onDismiss?.(toast);
-                }
+                deleteToast();
+                toast.onDismiss?.(toast);
+              }
           }
           className={cn(classNames?.closeButton, toast?.classNames?.closeButton)}
         >
@@ -436,11 +436,12 @@ const Toast = (props: ToastProps) => {
       ) : null}
       {/* TODO: This can be cleaner */}
       {(toastType || toast.icon || toast.promise) &&
-      toast.icon !== null &&
-      (icons?.[toastType] !== null || toast.icon) ? (
+        toast.icon !== null &&
+        (icons?.[toastType] !== null || toast.icon) ? (
         <div data-icon="" className={cn(classNames?.icon, toast?.classNames?.icon)}>
-          {toast.promise || (toast.type === 'loading' && !toast.icon) ? toast.icon || getLoadingIcon() : null}
-          {toast.type !== 'loading' ? icon : null}
+          {toast.type === 'loading'
+            ? toast.icon || getLoadingIcon()
+            : icon}
         </div>
       ) : null}
 
@@ -632,10 +633,10 @@ const Toaster = React.forwardRef<HTMLElement, ToasterProps>(function Toaster(pro
     theme !== 'system'
       ? theme
       : typeof window !== 'undefined'
-      ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
-      : 'light',
+        ? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+        : 'light',
   );
 
   const listRef = React.useRef<HTMLOListElement>(null);

test/src/app/page.tsx

@@ -364,6 +364,30 @@ export default function Home({ searchParams }: any) {
       >
         Promise Toast with testId
       </button>
+      <button
+        data-testid="promise-custom-icon"
+        className="button"
+        onClick={() =>
+          toast.promise(
+            new Promise((resolve) => setTimeout(resolve, 500)),
+            {
+              duration: Infinity,
+              loading: 'Loading...',
+              success: () => ({
+                message: 'Finished!',
+                icon: <svg data-testid="success-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                  <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                </svg>,
+              }),
+              error: 'Error',
+            }
+          )
+        }
+      >
+        Promise toast with custom icon
+
+      </button>
       {showAutoClose ? <div data-testid="auto-close-el" /> : null}
       {showDismiss ? <div data-testid="dismiss-el" /> : null}
       <Toaster

test/tests/basic.spec.ts

@@ -337,4 +337,13 @@ test.describe('Basic functionality', () => {
     await expect(page.getByTestId('promise-test-toast')).toHaveText('Loading...');
     await expect(page.getByTestId('promise-test-toast')).toHaveText('Loaded');
   });
+
+  test('promise toast with custom icon should replace loader on success', async ({ page }) => {
+    await page.getByTestId('promise-custom-icon').click();
+    await expect(page.getByText('Loading...')).toBeVisible();
+    await expect(page.getByText('Finished!')).toBeVisible();
+    const icons = page.locator('[data-sonner-toast] svg');
+    await expect(icons).toHaveCount(1);
+  });
+
 });