refactor(icon): use em for width and height of the icons. (#897)

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
IgniteUI · Sep 18, 2023 · 8c61f5e · 8c61f5e
1 parent 182fcf9
commit 8c61f5e
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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');
 }