From c62d3353a2a2a69d334e4bc448a5cd3c3d99f55a Mon Sep 17 00:00:00 2001
From: Mikhail Bashkirov <mikhail.bashkirov@ing.com>
Date: Thu, 27 Jun 2019 15:15:49 +0200
Subject: [PATCH] fix(icon): render nothing consistently when svg is undefined

---
 packages/icon/src/LionIcon.js        |  2 +-
 packages/icon/test/lion-icon.test.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/icon/src/LionIcon.js b/packages/icon/src/LionIcon.js
index 8934b907a..a6b4fea4f 100644
--- a/packages/icon/src/LionIcon.js
+++ b/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
diff --git a/packages/icon/test/lion-icon.test.js b/packages/icon/test/lion-icon.test.js
index 950766cdf..beb019692 100644
--- a/packages/icon/test/lion-icon.test.js
+++ b/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('');
+  });
 });