feat(filterin): fix icon margin and color

Author: MPopov

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

@@ -558,6 +558,10 @@
         @extend %igx-grid__filtering-row-editing-buttons !optional;
     }
 
+    @include e(filtering-row-editing-buttons, $m: small) {
+        @extend %igx-grid__filtering-row-editing-buttons--small !optional;
+    }
+
     @include e(filtering-row-main) {
         @extend %igx-grid__filtering-row-main !optional;
     }

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

@@ -2636,16 +2636,29 @@
     @include _excel-filtering($theme, $palette);
     @include _advanced-filtering($theme, $palette);
 
-
+    %igx-grid__filtering-row-editing-buttons--small,
     %igx-grid__filtering-row-editing-buttons {
         display: flex;
         align-items: center;
+    }
+
+    %igx-grid__filtering-row-editing-buttons {
+        button {
+            igx-icon {
+                margin-#{$right}: 8px;
+            }
+        }
+    }
 
-        [igxButton='icon'] {
+    %igx-grid__filtering-row-editing-buttons--small {
+        button {
             &:not([disabled]) {
-                color: --var($theme, 'sorted-header-icon-color');
+                igx-icon {
+                    color: --var($theme, 'sorted-header-icon-color');
+                }
             }
         }
     }
 }
 
+

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -121,7 +121,7 @@
     <igx-icon>navigate_next</igx-icon>
 </button>
 
-<div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
+<div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
     <button [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
         <igx-icon>refresh</igx-icon>
         {{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}