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 8849fbea076..4d435a8b137 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
@@ -2084,7 +2084,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-
+	        
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2112,10 +2112,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;
+	                }
                 }
             }
         }
@@ -2169,9 +2177,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;
+	            }
             }
         }
     }