diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
index c86141d239b..752ae64e76a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
@@ -244,7 +244,7 @@
         }
     }
 
-    [igxIconButton='flat'].igx-button--focused {
+    %igx-icon-button--flat.igx-button--focused {
         background: var-get($flat-theme, 'focus-background');
         color: var-get($flat-theme, 'focus-foreground');
 
@@ -389,7 +389,7 @@
         }
     }
 
-    [igxIconButton='outlined'].igx-button--focused {
+    %igx-icon-button--outlined.igx-button--focused {
         background: var-get($outlined-theme, 'focus-background');
         color: var-get($outlined-theme, 'focus-foreground');