fix(icon): render nothing consistently when svg is undefined

Author: Mikhail Bashkirov

packages/icon/src/LionIcon.js

@@ -89,7 +89,7 @@ export class LionIcon extends LionLitElement {
    * so make sure to have <svg focusable="false"> in svg files
    */
   _setSvg() {
-    this.innerHTML = this.svg;
+    this.innerHTML = this.svg ? this.svg : '';
   }
 
   // TODO: find a better way to render dynamic icons without the need for unsafeHTML

packages/icon/test/lion-icon.test.js

@@ -149,4 +149,16 @@ describe('lion-icon', () => {
 
     expect(el.children[0].id).to.equal('svg-heart');
   });
+
+  it('does not render "undefined" if changed from valid input to undefined', async () => {
+    const el = await fixture(
+      html`
+        <lion-icon .svg=${heartSvg}></lion-icon>
+      `,
+    );
+    await el.updateComplete;
+    el.svg = undefined;
+    await el.updateComplete;
+    expect(el.innerHTML).to.equal('');
+  });
 });