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
index d6c6cb7511d..bd51ae16c3f 100644
--- 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
@@ -2105,7 +2105,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-
+	        
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2133,10 +2133,18 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
+	            
+	            > igx-icon {
+		            color: inherit;
+	            }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
+	                
+	                > igx-icon {
+		                color: inherit;
+	                }
                 }
             }
         }
@@ -2190,9 +2198,17 @@
         .sort-icon {
             opacity: 1;
             color: var-get($theme, 'sorted-header-icon-color');
+	        
+	        > igx-icon {
+		        color: inherit;
+	        }
 
             &:hover {
                 color: var-get($theme, 'sortable-header-icon-hover-color');
+	            
+	            > igx-icon {
+		            color: inherit;
+	            }
             }
         }
     }