improve icon button detection; fixes #1475

packages/webawesome/docs/docs/resources/changelog.md

@@ -20,6 +20,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
 - Fixed a bug that caused icon button labels to not render in frameworks [issue:1542]
 - Fixed a bug in `<wa-details>` that caused the `name` property not to reflect [pr:1538]
+- Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
 
 ## 3.0.0-beta.6
 

packages/webawesome/src/components/button/button.ts

@@ -176,22 +176,32 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
     const nodes = this.labelSlot.assignedNodes({ flatten: true });
     let hasIconLabel = false;
     let hasIcon = false;
-    let text = '';
+    let hasText = false;
+    let hasOtherElements = false;
 
-    // If there's only an icon and no text, it's an icon button
+    // Check all slotted nodes
     [...nodes].forEach(node => {
-      if (node.nodeType === Node.ELEMENT_NODE && (node as WaIcon).localName === 'wa-icon') {
+      if (node.nodeType === Node.ELEMENT_NODE) {
-        hasIcon = true;
+        const element = node as HTMLElement;
-        if (!hasIconLabel) hasIconLabel = (node as WaIcon).label !== undefined;
-      }
 
-      // Concatenate text nodes
+        if (element.localName === 'wa-icon') {
-      if (node.nodeType === Node.TEXT_NODE) {
+          hasIcon = true;
-        text += node.textContent;
+          if (!hasIconLabel) hasIconLabel = (element as WaIcon).label !== undefined;
+        } else {
+          // Any other element type means it's not an icon button
+          hasOtherElements = true;
+        }
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        // Check if text node has actual content
+        const text = node.textContent?.trim() || '';
+        if (text.length > 0) {
+          hasText = true;
+        }
       }
     });
 
-    this.isIconButton = text.trim() === '' && hasIcon;
+    // It's only an icon button if there's an icon and nothing else
+    this.isIconButton = hasIcon && !hasText && !hasOtherElements;
 
     if (this.isIconButton && !hasIconLabel) {
       console.warn(