fix(chip): Prevent rendering internal icon if not necessary. (#8663)

**Related Issue:**#8674

## Summary

- Prevents rendering the internal calcite-icon if no selection icon is
specified
- Causes screenshot tests in the Maps SDK to fail because its
expecting/waiting for an icon to load and it will never load since no
icon is specified
- Maybe we should make the icon property required on `calcite-icon`?

packages/calcite-components/src/components/chip/chip.e2e.ts

@@ -27,6 +27,18 @@ describe("calcite-chip", () => {
     disabled("<calcite-chip interactive>doritos</calcite-chip>");
   });
 
+  it("should not render a calcite-icon when selectionMode is single and not selected", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`<calcite-chip selection-mode="single" id="chip-1" >cheetos</calcite-chip>`);
+
+    await page.waitForChanges();
+
+    const icon = await page.find("#chip-1 >>> calcite-icon");
+
+    expect(icon).toBeNull();
+  });
+
   it("should not emit event after the chip is clicked if interactive if not set", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-chip id="chip-1" >cheetos</calcite-chip>`);

packages/calcite-components/src/components/chip/chip.tsx

@@ -340,7 +340,7 @@ export class Chip
           [CSS.selectIconActive]: this.selectionMode === "multiple" || this.selected,
         }}
       >
-        <calcite-icon icon={icon} scale={getIconScale(this.scale)} />
+        {icon ? <calcite-icon icon={icon} scale={getIconScale(this.scale)} /> : null}
       </div>
     );
   }