diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss
index 83504a552a2..787b19bb93d 100644
--- a/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss
+++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/indigo.scss
@@ -17,6 +17,18 @@ $_theme: $indigo;
 
     row-gap: rem(4px);
 
+    &:hover {
+        @include e(toggle-button) {
+            color: var(--toggle-button-foreground-focus);
+            background: var(--toggle-button-background-focus);
+        }
+
+        @include e(clear-button) {
+            color: var(--clear-button-foreground-focus);
+            background: var(--clear-button-background-focus);
+        }
+    }
+
     @include e(clear-icon) {
         &:focus {
             color: contrast-color($color: 'primary', $variant: 600);
@@ -209,6 +221,18 @@ $_theme: $indigo;
             @include e(bundle) {
                 background: var-get($_theme, 'box-disabled-background');
             }
+
+            @include e(toggle-button) {
+                cursor: default;
+                color: var(--toggle-button-foreground-disabled);
+                background: var(--toggle-button-background-disabled);
+            }
+
+            @include e(clear-button) {
+                cursor: default;
+                color: var-get($_theme, 'disabled-text-color');
+                background: var-get($_theme, 'border-disabled-background');
+            }
         }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss
index a82f0589030..4f1f950e8cf 100644
--- a/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss
+++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/material.scss
@@ -217,6 +217,12 @@ $input-bottom-spacing: rem(6px);
         }
     }
 
+    @include mx(focused, filled) {
+        @include e(toggle-button) {
+            color: var(--toggle-button-foreground-filled);
+        }
+    }
+
     @include mx(base, valid) {
         @include e(bundle) {
             &::before {