From 8c61f5ec27562ee247c8d4112f1ac3f5c6c66d52 Mon Sep 17 00:00:00 2001
From: Marin Popov <desig9stein@users.noreply.github.com>
Date: Mon, 18 Sep 2023 14:26:04 +0300
Subject: [PATCH] refactor(icon): use em for width and height of the icons.
 (#897)

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
---
 src/components/icon/icon.base.scss            | 6 ++++++
 src/components/icon/light/icon.bootstrap.scss | 5 ++---
 src/components/icon/light/icon.fluent.scss    | 5 ++---
 src/components/icon/light/icon.indigo.scss    | 5 ++---
 src/components/icon/light/icon.material.scss  | 5 ++---
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/icon/icon.base.scss b/src/components/icon/icon.base.scss
index 5f1899e52..d135c8c96 100644
--- a/src/components/icon/icon.base.scss
+++ b/src/components/icon/icon.base.scss
@@ -7,6 +7,12 @@
     justify-content: center;
 }
 
+igc-icon,
+svg {
+    width: 1em;
+    height: 1em;
+}
+
 :host([size='small']) {
     --component-size: var(--ig-size, var(--ig-size-small));
 }
diff --git a/src/components/icon/light/icon.bootstrap.scss b/src/components/icon/light/icon.bootstrap.scss
index b3eb1a395..bade95f21 100644
--- a/src/components/icon/light/icon.bootstrap.scss
+++ b/src/components/icon/light/icon.bootstrap.scss
@@ -15,8 +15,7 @@ svg {
     fill: currentcolor;
 }
 
-:host,
+igc-icon,
 svg {
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
+    font-size: var-get($theme, 'size');
 }
diff --git a/src/components/icon/light/icon.fluent.scss b/src/components/icon/light/icon.fluent.scss
index 2b2544af1..9fcc2b46a 100644
--- a/src/components/icon/light/icon.fluent.scss
+++ b/src/components/icon/light/icon.fluent.scss
@@ -15,8 +15,7 @@ svg {
     fill: currentcolor;
 }
 
-:host,
+igc-icon,
 svg {
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
+    font-size: var-get($theme, 'size');
 }
diff --git a/src/components/icon/light/icon.indigo.scss b/src/components/icon/light/icon.indigo.scss
index 4c2239d68..9f03b442d 100644
--- a/src/components/icon/light/icon.indigo.scss
+++ b/src/components/icon/light/icon.indigo.scss
@@ -15,8 +15,7 @@ svg {
     fill: currentcolor;
 }
 
-:host,
+igc-icon,
 svg {
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
+    font-size: var-get($theme, 'size');
 }
diff --git a/src/components/icon/light/icon.material.scss b/src/components/icon/light/icon.material.scss
index 2ff2b4275..8aa6ef205 100644
--- a/src/components/icon/light/icon.material.scss
+++ b/src/components/icon/light/icon.material.scss
@@ -15,8 +15,7 @@ svg {
     fill: currentcolor;
 }
 
-:host,
+igc-icon,
 svg {
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
+    font-size: var-get($theme, 'size');
 }