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

simeonoff · web-flow · commit 06959f3f8c85 · 2025-01-10T10:18:22.000+02:00
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
@@ -384,7 +384,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
@@ -1204,7 +1204,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 {
@@ -1458,12 +1458,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;
                 }
             }
@@ -2035,13 +2035,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)});
                 }
             }
 
@@ -2147,15 +2144,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');
                     }
                 }
@@ -2499,7 +2496,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');
@@ -3447,10 +3444,9 @@
             }
 
             @if $variant == 'indigo' {
-                %igx-icon-display {
+                igx-icon {
                     opacity: if($theme-variant == 'light', .75, .85);
 
-
                     &:hover {
                         opacity: 1;
                         cursor: pointer;

Original file line number	Diff line number	Diff line change
`@@ -384,7 +384,7 @@`
`384`	`384`	`}`
`385`	`385`
`386`	`386`	`@if $variant == 'indigo' {`
`387`		`- %igx-icon-display {`
	`387`	`+ igx-icon {`
`388`	`388`	`--size: #{sizable(rem(14px), rem(14px), rem(16px))}`
`389`	`389`	`}`
`390`	`390`	`}`
Original file line number	Diff line number	Diff line change
`@@ -174,14 +174,14 @@`
`174`	`174`	`// The wrapping element here is needed`
`175`	`175`	`// in order to override the !important rule of .igx-icon--inactive.`
`176`	`176`	`%igx-combo__case-icon {`
`177`		`- .igx-icon {`
	`177`	`+ igx-icon {`
`178`	`178`	`// Important is needed since the .igx-icon--inactive has !important`
`179`	`179`	`color: color($color: 'gray', $variant: 600) !important;`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`
`183`	`183`	`%igx-combo__case-icon--active {`
`184`		`- .igx-icon {`
	`184`	`+ igx-icon {`
`185`	`185`	`color: color($color: 'primary')`
`186`	`186`	`}`
`187`	`187`	`}`
Original file line number	Diff line number	Diff line change
`@@ -99,13 +99,9 @@`
`99`	`99`	`}`
`100`	`100`	`}`
`101`	`101`
`102`		`- igx-icon {`
`103`		`- @if $variant == 'indigo' {`
`104`		`- --component-size: 2;`
`105`		`- } @else {`
`106`		`- width: var(--igx-icon-size, #{rem(15px)});`
`107`		`- height: var(--igx-icon-size, #{rem(15px)});`
`108`		`- font-size: var(--igx-icon-size, #{rem(15px)});`
	`102`	`+ @if $variant != 'indigo' {`
	`103`	`+ igx-icon {`
	`104`	`+ --size: var(--igx-icon-size, #{rem(15px)});`
`109`	`105`	`}`
`110`	`106`	`}`
`111`	`107`	`}`