fix(themes): igx-icon gets overridden multiple themes (#15221)

IgniteUI · Jan 10, 2025 · 620832f · 620832f
1 parent d67b13c
commit 620832f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 25 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -386,7 +386,7 @@
         }
 
         @if $variant == 'indigo' {
-            %igx-icon-display {
+            igx-icon {
                 --size: #{sizable(rem(14px), rem(14px), rem(16px))}
             }
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -174,14 +174,14 @@
     // The wrapping element here is needed
     // in order to override the !important rule of .igx-icon--inactive.
     %igx-combo__case-icon {
-        .igx-icon {
+        igx-icon {
             // Important is needed since the .igx-icon--inactive has !important
             color: color($color: 'gray', $variant: 600) !important;
         }
     }
 
     %igx-combo__case-icon--active {
-        .igx-icon {
+        igx-icon {
             color: color($color: 'primary')
         }
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -99,13 +99,9 @@
             }
         }
 
-        igx-icon {
-            @if $variant == 'indigo' {
-                --component-size: 2;
-            } @else {
-                width: var(--igx-icon-size, #{rem(15px)});
-                height: var(--igx-icon-size, #{rem(15px)});
-                font-size: var(--igx-icon-size, #{rem(15px)});
+        @if $variant != 'indigo' {
+            igx-icon {
+                --size: var(--igx-icon-size, #{rem(15px)});
             }
         }
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -1206,7 +1206,7 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
 
                 &:hover {
@@ -1460,12 +1460,12 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
             }
 
             &:hover {
-                %igx-icon-display {
+                igx-icon {
                     opacity: 1;
                 }
             }
@@ -2037,13 +2037,10 @@
             position: relative;
             display: flex;
 
-            igx-icon {
-                @if $variant == 'indigo' {
-                    --component-size: 2;
-                } @else {
-                    width: var(--igx-icon-size, #{rem(15px)});
-                    height: var(--igx-icon-size, #{rem(15px)});
-                    font-size: var(--igx-icon-size, #{rem(15px)});
+
+            @if $variant != 'indigo' {
+                igx-icon {
+                    --size: var(--igx-icon-size, #{rem(15px)});
                 }
             }
 
@@ -2149,15 +2146,15 @@
             %grid-excel-icon {
                 color: var-get($theme, 'header-selected-text-color');
 
-                %igx-icon-display {
+                igx-icon {
                     color: var-get($theme, 'header-selected-text-color');
                 }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
 
-                    %igx-icon-display {
+                    igx-icon {
                         color: var-get($theme, 'header-selected-text-color');
                     }
                 }
@@ -2501,7 +2498,7 @@
     }
 
     %igx-group-label__icon {
-        &.igx-icon {
+        @at-root igx-icon#{&} {
             --component-size: #{if($variant == 'indigo', 2, 1)};
 
             color: var-get($theme, 'group-label-icon');
@@ -3449,10 +3446,9 @@
             }
 
             @if $variant == 'indigo' {
-                %igx-icon-display {
+                igx-icon {
                     opacity: if($theme-variant == 'light', .75, .85);
 
-
                     &:hover {
                         opacity: 1;
                         cursor: pointer;