fix(themes): icon sizing discrepancies (#13245)

* fix(themes): icon sizing discrepancies
Closes #13238
---------

Co-authored-by: Marin Popov <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 4 people

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -556,6 +556,7 @@
         }
 
         igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-large));
             display: flex;
             justify-content: center;
             width: var(--igx-icon-size, #{$icon-in-button-size});
@@ -570,10 +571,18 @@
 
     %igx-button-display--cosy {
         --component-size: var(--ig-size, var(--ig-size-medium));
+
+        igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-medium));
+        }
     }
 
     %igx-button-display--compact {
         --component-size: var(--ig-size, var(--ig-size-small));
+
+        igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-small));
+        }
     }
 
     igx-grid-filtering-row {

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -398,9 +398,13 @@
         }
 
         igx-avatar,
-        igx-circular-bar {
-            --component-size: 3;
+        igx-circular-bar,
+        igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-large));
+        }
 
+        igx-avatar,
+        igx-circular-bar {
             $avatar-size: (
                 comfortable: rem(24px),
                 cosy: rem(18),
@@ -426,14 +430,16 @@
     }
 
     %igx-chip__item--cosy {
-        igx-avatar {
-            --component-size: 2;
+        igx-avatar,
+        igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-medium));
         }
     }
 
     %igx-chip__item--compact {
-        igx-avatar {
-            --component-size: 1;
+        igx-avatar,
+        igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-small));
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -864,6 +864,15 @@
         display: flex;
         overflow: hidden;
 
+        %igx-grid__header-indentation {
+            igx-icon {
+                --component-size: var(--ig-size, var(--ig-size-large));
+                font-size: rem(24px);
+                width: rem(24px);
+                height: rem(24px);
+            }
+        }
+
         %igx-grid__drag-indicator {
             cursor: default;
         }
@@ -879,12 +888,24 @@
     }
 
     %grid-thead--cosy {
+        %igx-grid__header-indentation {
+            igx-icon {
+                --component-size: var(--ig-size, var(--ig-size-medium));
+            }
+        }
+
         %grid__cbx-selection--push--cosy {
             align-items: flex-start;
         }
     }
 
     %grid-thead--compact {
+        %igx-grid__header-indentation {
+            igx-icon {
+                --component-size: var(--ig-size, var(--ig-size-small));
+            }
+        }
+
         %grid__cbx-selection--push--compact {
             align-items: flex-start;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss

@@ -87,7 +87,10 @@
         %form-group-prefix,
         %form-group-prefix--cosy,
         %form-group-prefix--compact {
-            padding-inline-end: rem(16px) !important;
+            @if $variant == 'material' {
+                padding-inline-end: rem(16px) !important;
+            }
+
             box-sizing: content-box;
         }
 
@@ -125,6 +128,7 @@
 
             > h6 {
                 font-size: rem(12px);
+                margin-bottom: 0;
             }
         }