fix(icon): clear displayed icon when icon attribute is removed or empty (#2727)

* fix(rh-icon): clear icon when attribute is removed or empty

* chore(icon): fix lint errors

* chore(icon): add changeset file

* chore(rh-icon): apply requested changes

* fix(rh-icon): ensure dynamic icon removal works in SSR and client-side

* chore: fix lint's errors

* chore: Adding a test to test the behavior in SSR

---------

Co-authored-by: Sara Dahan <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

Author: 3 people

.changeset/twenty-eggs-create.md

@@ -0,0 +1,6 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-icon>`: remove the displayed icon when the `icon` attribute is removed or set to an empty string.
+

elements/rh-icon/demo/test-remove-icon-dynamic.html

@@ -0,0 +1,15 @@
+<rh-icon icon="hat"></rh-icon>
+<rh-button id="remove">Remove Icon</rh-button>
+<script type="module">
+  import "@rhds/elements/rh-icon/rh-icon.js";
+  import "@rhds/elements/rh-button/rh-button.js";
+  const icon = document.querySelector('rh-icon');
+  const btn = document.getElementById('remove');
+
+  btn.addEventListener('click', () => {
+    icon.removeAttribute('icon');
+
+  });
+</script>
+
+<rh-icon icon="">test</rh-icon>

elements/rh-icon/rh-icon.ts

@@ -27,7 +27,7 @@ export type IconResolverFunction = (set: string, icon: string) =>
  * @param f callback
  */
 const ric: typeof globalThis.requestIdleCallback =
-     globalThis.requestIdleCallback
+  globalThis.requestIdleCallback
   ?? globalThis.requestAnimationFrame
   ?? (async (f: () => void) => Promise.resolve().then(f));
 
@@ -137,6 +137,9 @@ export class RhIcon extends LitElement {
   #getContent() {
     if (isServer) {
       const { set = 'standard', icon } = this;
+      if (!icon) {
+        return '';
+      }
       return globalThis.RH_ICONS.get(set)?.get(icon as never) ?? '';
     } else {
       return this.content as string ?? '';
@@ -152,6 +155,10 @@ export class RhIcon extends LitElement {
   @observes('icon')
   @observes('set')
   private iconChanged(): void {
+    if (!this.icon) {
+      this.content = null;
+      return;
+    }
     this.#dispatchLoad();
   }