fix icons rendering as null

src/components/tree/tree.component.ts

@@ -144,12 +144,16 @@ export default class SlTree extends ShoelaceElement {
       .forEach((status: 'expand' | 'collapse') => {
         const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
 
+        const expandButtonIcon = this.getExpandButtonIcon(status)
+
+        if (!expandButtonIcon) return
+
         if (existingIcon === null) {
           // No separator exists, add one
-          item.append(this.getExpandButtonIcon(status)!);
+          item.append(expandButtonIcon);
         } else if (existingIcon.hasAttribute('data-default')) {
           // A default separator exists, replace it
-          existingIcon.replaceWith(this.getExpandButtonIcon(status)!);
+          existingIcon.replaceWith(expandButtonIcon);
         } else {
           // The user provided a custom icon, leave it alone
         }

src/components/tree/tree.test.ts

@@ -752,4 +752,32 @@ describe('<sl-tree>', () => {
       });
     });
   });
+
+
+  // https://github.com/shoelace-style/shoelace/issues/1916
+  it("Should not render 'null' if it can't find a custom icon", async () => {
+    const tree = await fixture<SlTree>(html`
+      <sl-tree>
+        <sl-tree-item>
+          Item 1
+          <sl-icon name="1-circle" slot="expand-icon"></sl-icon>
+          <sl-tree-item>
+            Item A
+          </sl-tree-item>
+        </sl-tree-item>
+        <sl-tree-item>
+          Item 2
+          <sl-tree-item>Item A</sl-tree-item>
+          <sl-tree-item>Item B</sl-tree-item>
+        </sl-tree-item>
+        <sl-tree-item>
+          Item 3
+          <sl-tree-item>Item A</sl-tree-item>
+          <sl-tree-item>Item B</sl-tree-item>
+        </sl-tree-item>
+      </sl-tree>
+    `)
+
+    expect(tree.textContent).to.not.includes("null")
+  })
 });