diff --git a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss
index 1bbac9cde6b..ea32c2dd14a 100644
--- a/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss
+++ b/projects/igniteui-angular/src/lib/buttonGroup/themes/shared/_material.scss
@@ -77,12 +77,12 @@ $_theme: $material;
         &:active {
             @extend %item-overlay;
 
-            color: var-get($_theme, 'item-selected-text-color');
+            color: var-get($_theme, 'item-selected-hover-text-color');
             background: var-get($_theme, 'item-selected-background');
             border-color: var-get($_theme, 'item-selected-border-color');
 
             igx-icon {
-                color: var-get($_theme, 'item-selected-icon-color');
+                color: var-get($_theme, 'item-selected-hover-icon-color');
             }
 
             &::before {
@@ -119,6 +119,11 @@ $_theme: $material;
 
             &:active {
                 background: var-get($_theme, 'item-selected-background');
+                color: var-get($_theme, 'item-selected-hover-text-color');
+
+                igx-icon {
+                    color: var-get($_theme, 'item-selected-hover-icon-color');
+                }
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
index 00a57b5b802..d228e2ec20b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
@@ -414,7 +414,11 @@
             border-color: var-get($flat-theme, 'focus-visible-border-color');
 
             igx-icon {
-                color: var-get($flat-theme, 'icon-color');
+                @if $variant == 'material' {
+                    color: var-get($flat-theme, 'icon-color-hover');
+                } @else {
+                    color: var-get($flat-theme, 'icon-color');
+                }
             }
 
             @if $variant == 'bootstrap' {
@@ -572,7 +576,15 @@
             &:active {
                 background: var-get($outlined-theme, 'focus-background');
                 color: var-get($outlined-theme, 'focus-foreground');
-                border-color: var-get($outlined-theme, 'active-border-color');
+                @if $variant == 'material' {
+                    border-color: var-get($outlined-theme, 'focus-border-color');
+
+                    igx-icon {
+                        color: var-get($outlined-theme, 'focus-foreground');
+                    }
+                } @else {
+                    border-color: var-get($outlined-theme, 'active-border-color');
+                }
 
                 @if $variant == 'indigo' {
                     igx-icon {
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 d28515020bc..a7b9698e900 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
@@ -892,7 +892,7 @@
             @include css-vars((
                 name: 'igx-grid-row',
                 row-ghost-background: map.get($theme, 'row-ghost-background'),
-                row-drag-color: map.get($theme, 'row-drago-color')
+                row-drag-color: map.get($theme, 'row-drag-color')
             ));
         }
     }
@@ -1004,7 +1004,11 @@
         }
 
         %igx-icon--error {
-            color: color($color: 'gray', $variant: 500);
+            @if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' {
+                color: color($color: 'gray', $variant: 600);
+            } @else {
+                color: color($color: 'gray', $variant: 500);
+            }
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss
index 94282c576cc..12972aab6f7 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss
+++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss
@@ -54,6 +54,16 @@ $theme: $material;
             @include e(header) {
                 background: var-get($theme, 'step-focus-background');
                 color: var-get($theme, 'title-focus-color');
+
+                &:hover {
+                    #{elem($this, title)} {
+                        color: var-get($theme, 'title-focus-color');
+                    }
+
+                    #{elem($this, subtitle)} {
+                        color: var-get($theme, 'subtitle-focus-color');
+                    }
+                }
             }
         }
 
@@ -67,6 +77,16 @@ $theme: $material;
             &:focus {
                 @include e(header) {
                     background: var-get($theme, 'invalid-step-focus-background');
+
+                    &:hover {
+                        #{elem($this, title)} {
+                            color: var-get($theme, 'invalid-title-focus-color');
+                        }
+
+                        #{elem($this, subtitle)} {
+                            color: var-get($theme, 'invalid-subtitle-focus-color');
+                        }
+                    }
                 }
 
                 @include e(title) {
@@ -82,7 +102,17 @@ $theme: $material;
         @include m(current) {
             &:focus {
                 @include e(header) {
-                    background: var-get($theme, 'current-step-focus-background') !important;
+                    background: var-get($theme, 'current-step-focus-background');
+
+                    &:hover {
+                        #{elem($this, title)} {
+                            color: var-get($theme, 'current-title-focus-color');
+                        }
+
+                        #{elem($this, subtitle)} {
+                            color: var-get($theme, 'current-subtitle-focus-color');
+                        }
+                    }
                 }
 
                 @include e(title) {
@@ -146,6 +176,16 @@ $theme: $material;
             &:focus {
                 @include e(header) {
                     background: var-get($theme, 'complete-step-focus-background');
+
+                    &:hover {
+                        #{elem($this, title)} {
+                            color: var-get($theme, 'complete-title-focus-color');
+                        }
+
+                        #{elem($this, subtitle)} {
+                            color: var-get($theme, 'complete-subtitle-focus-color');
+                        }
+                    }
                 }
 
                 @include e(title) {
@@ -388,6 +428,7 @@ $theme: $material;
             border-radius: var-get($theme, 'border-radius-indicator');
             color: var-get($theme, 'indicator-color');
             background: var-get($theme, 'indicator-background');
+            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'indicator-outline');
         }
 
         @include e(title) {
@@ -427,6 +468,7 @@ $theme: $material;
             @include e(indicator) {
                 color: var-get($theme, 'invalid-indicator-color');
                 background: var-get($theme, 'invalid-indicator-background');
+                box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'invalid-indicator-outline');
             }
 
             @include e(title) {
@@ -438,6 +480,8 @@ $theme: $material;
             }
 
             &:hover {
+                background: var-get($theme, 'invalid-step-hover-background');
+
                 @include e(title) {
                     color: var-get($theme, 'invalid-title-hover-color');
                 }
@@ -459,6 +503,7 @@ $theme: $material;
             @include e(indicator) {
                 color: var-get($theme, 'complete-indicator-color');
                 background: var-get($theme, 'complete-indicator-background');
+                box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'complete-indicator-outline');
             }
 
             @include e(title) {
@@ -483,12 +528,13 @@ $theme: $material;
         }
 
         @include m(current) {
-            background: var-get($theme, 'current-step-background') !important;
+            background: var-get($theme, 'current-step-background');
             color: var-get($theme, 'current-title-color');
 
             @include e(indicator) {
                 color: var-get($theme, 'current-indicator-color') !important;
-                background: var-get($theme, 'current-indicator-background') !important;
+                background: var-get($theme, 'current-indicator-background');
+                box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'current-indicator-outline') !important;
             }
 
             @include e(title) {
@@ -503,7 +549,7 @@ $theme: $material;
             }
 
             &:hover {
-                background: var-get($theme, 'current-step-hover-background') !important;
+                background: var-get($theme, 'current-step-hover-background');
 
                 @include e(title) {
                     color: var-get($theme, 'current-title-hover-color');
@@ -523,6 +569,7 @@ $theme: $material;
             @include e(indicator) {
                 color: var-get($theme, 'disabled-indicator-color');
                 background: var-get($theme, 'disabled-indicator-background');
+                box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($theme, 'disabled-indicator-outline');
             }
 
             @include e(title) {
diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss
index a33b64cd354..7fcac6e9a62 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss
@@ -131,7 +131,6 @@ $_theme: $bootstrap;
         height: $indicator-size;
         width: $indicator-size;
         min-width: $indicator-size;
-        box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline');
 
         > igx-icon {
             --size: var(--igx-icon-size, #{rem(18px)});
@@ -151,29 +150,3 @@ $_theme: $bootstrap;
         }
     }
 }
-
-@include themed-block(igx-step-header, bootstrap) {
-    @include m(completed) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline');
-        }
-    }
-
-    @include m(current) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important;
-        }
-    }
-
-    @include m(invalid) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline');
-        }
-    }
-
-    @include m(disabled) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline');
-        }
-    }
-}
diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss
index 31dd16ee9aa..634d01cf7dd 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss
+++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss
@@ -118,7 +118,6 @@ $_theme: $fluent;
         height: $indicator-size;
         width: $indicator-size;
         min-width: $indicator-size;
-        box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline');
 
         > igx-icon {
             --size: var(--igx-icon-size, #{rem(18px)});
@@ -133,29 +132,3 @@ $_theme: $fluent;
         }
     }
 }
-
-@include themed-block(igx-step-header, fluent) {
-    @include m(completed) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline');
-        }
-    }
-
-    @include m(current) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important;
-        }
-    }
-
-    @include m(invalid) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline');
-        }
-    }
-
-    @include m(disabled) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline');
-        }
-    }
-}
diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss
index a010f103ed8..88dab4502d4 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss
+++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss
@@ -126,7 +126,6 @@ $_theme: $indigo;
         height: $indicator-size;
         width: $indicator-size;
         min-width: $indicator-size;
-        box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'indicator-outline');
 
         > igx-icon {
             --size: #{var(--igx-icon--size, #{rem(14px)})};
@@ -140,29 +139,3 @@ $_theme: $indigo;
         }
     }
 }
-
-@include themed-block(igx-step-header, indigo) {
-    @include m(completed) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'complete-indicator-outline');
-        }
-    }
-
-    @include m(current) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'current-indicator-outline') !important;
-        }
-    }
-
-    @include m(invalid) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'invalid-indicator-outline');
-        }
-    }
-
-    @include m(disabled) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'disabled-indicator-outline');
-        }
-    }
-}
diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss
index 8c6599363c2..27942f97449 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss
+++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss
@@ -113,7 +113,6 @@ $_theme: $material;
         height: $indicator-size;
         width: $indicator-size;
         min-width: $indicator-size;
-        box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline');
 
         > igx-icon {
             --size: var(--igx-icon-size, #{rem(18px)});
@@ -128,29 +127,3 @@ $_theme: $material;
         }
     }
 }
-
-@include themed-block(igx-step-header, material) {
-    @include m(completed) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline');
-        }
-    }
-
-    @include m(current) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important;
-        }
-    }
-
-    @include m(invalid) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline');
-        }
-    }
-
-    @include m(disabled) {
-        @include e(indicator) {
-            box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline');
-        }
-    }
-}
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss
index 57bb451173a..40e0dee5cac 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_material.scss
@@ -6,6 +6,10 @@
 $_theme: $material;
 
 @include themed-block(igx-tabs, material) {
+    @include b(igx-tabs-header) {
+        background: var-get($_theme, 'item-background');
+    }
+
     @include b(igx-tabs-header-button) {
         &:focus {
             background: var-get($_theme, 'button-hover-background');