From 38a5d846119053bc965e35b86a4a733844d0f75f Mon Sep 17 00:00:00 2001
From: Tim Roes <mail@timroes.de>
Date: Wed, 19 Jan 2022 11:47:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Prevent=20SVG=20icons=20from=20l?=
 =?UTF-8?q?eaking=20into=20DOM=20(#9574)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 airbyte-webapp/src/utils/imageUtils.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/airbyte-webapp/src/utils/imageUtils.tsx b/airbyte-webapp/src/utils/imageUtils.tsx
index 7dcb5671c8efa..f64222ada8df7 100644
--- a/airbyte-webapp/src/utils/imageUtils.tsx
+++ b/airbyte-webapp/src/utils/imageUtils.tsx
@@ -3,12 +3,9 @@ import styled from "styled-components";
 
 import { DefaultLogoCatalog } from "components";
 
-const IconContainer = styled.div`
+const IconContainer = styled.img`
   height: 100%;
-  & > svg {
-    height: 100%;
-    width: 100%;
-  }
+  width: 100%;
 `;
 
 const IconDefaultContainer = styled.div`
@@ -24,5 +21,10 @@ export const getIcon = (icon?: string): React.ReactNode => {
     );
   }
 
-  return <IconContainer dangerouslySetInnerHTML={{ __html: icon }} />;
+  return (
+    <IconContainer
+      alt=""
+      src={`data:image/svg+xml;utf8,${encodeURIComponent(icon)}`}
+    />
+  );
 };