diff --git a/package-lock.json b/package-lock.json
index 841ed027b..9b22958ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "globby": "^14.0.0",
         "husky": "^8.0.3",
         "ig-typedoc-theme": "^5.0.1",
-        "igniteui-theming": "^3.3.2",
+        "igniteui-theming": "^4.0.0",
         "keep-a-changelog": "^2.5.2",
         "lint-staged": "^15.1.0",
         "lit-analyzer": "^2.0.1",
@@ -13985,9 +13985,9 @@
       "dev": true
     },
     "node_modules/igniteui-theming": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.3.2.tgz",
-      "integrity": "sha512-8R3zB2xFQ8oL4FXVfmw6H3nckVsQbLbpKS+BMNxiwFCpSO3kLag4IqN2gbIoszum9uKu56KYq3asN1Zv71VUMw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.0.0.tgz",
+      "integrity": "sha512-XumbW89ag90F07no4jNi8KsK+bke/RR7FaUIc6OCSPtqN8OG+nsClURME5HTlTRfFvBxGDbtWzc6kyQn9Eu7/A==",
       "dev": true,
       "peerDependencies": {
         "sass": "^1.58.1"
diff --git a/package.json b/package.json
index f281c5f55..9690f2af4 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "globby": "^14.0.0",
     "husky": "^8.0.3",
     "ig-typedoc-theme": "^5.0.1",
-    "igniteui-theming": "^3.3.2",
+    "igniteui-theming": "^4.0.0",
     "keep-a-changelog": "^2.5.2",
     "lint-staged": "^15.1.0",
     "lit-analyzer": "^2.0.1",
diff --git a/src/components/button/themes/button/dark/_themes.scss b/src/components/button/themes/button/dark/_themes.scss
index 829ab3b21..cb76980e3 100644
--- a/src/components/button/themes/button/dark/_themes.scss
+++ b/src/components/button/themes/button/dark/_themes.scss
@@ -4,24 +4,24 @@
 
 // Material Themes
 $material-flat: digest-schema(map.get($dark-button, 'flat'));
-$material-contained: digest-schema(map.get($dark-button, 'raised'));
+$material-contained: digest-schema(map.get($dark-button, 'contained'));
 $material-outlined: digest-schema(map.get($dark-button, 'outlined'));
 $material-fab: digest-schema(map.get($dark-button, 'fab'));
 
 // Bootstrap Themes
 $bootstrap-flat: digest-schema(map.get($dark-bootstrap-button, 'flat'));
-$bootstrap-contained: digest-schema(map.get($dark-bootstrap-button, 'raised'));
+$bootstrap-contained: digest-schema(map.get($dark-bootstrap-button, 'contained'));
 $bootstrap-outlined: digest-schema(map.get($dark-bootstrap-button, 'outlined'));
 $bootstrap-fab: digest-schema(map.get($dark-bootstrap-button, 'fab'));
 
 // Fluent Themes
 $fluent-flat: digest-schema(map.get($dark-fluent-button, 'flat'));
-$fluent-contained: digest-schema(map.get($dark-fluent-button, 'raised'));
+$fluent-contained: digest-schema(map.get($dark-fluent-button, 'contained'));
 $fluent-outlined: digest-schema(map.get($dark-fluent-button, 'outlined'));
 $fluent-fab: digest-schema(map.get($dark-fluent-button, 'fab'));
 
 // Indigo Themes
 $indigo-flat: digest-schema(map.get($dark-indigo-button, 'flat'));
-$indigo-contained: digest-schema(map.get($dark-indigo-button, 'raised'));
+$indigo-contained: digest-schema(map.get($dark-indigo-button, 'contained'));
 $indigo-outlined: digest-schema(map.get($dark-indigo-button, 'outlined'));
 $indigo-fab: digest-schema(map.get($dark-indigo-button, 'fab'));
diff --git a/src/components/button/themes/button/light/_themes.scss b/src/components/button/themes/button/light/_themes.scss
index 81d98b4e3..071acf3fb 100644
--- a/src/components/button/themes/button/light/_themes.scss
+++ b/src/components/button/themes/button/light/_themes.scss
@@ -3,24 +3,24 @@
 
 // Material Themes
 $material-flat: digest-schema($material-flat-button);
-$material-contained: digest-schema($material-raised-button);
+$material-contained: digest-schema($material-contained-button);
 $material-outlined: digest-schema($material-outlined-button);
 $material-fab: digest-schema($material-fab-button);
 
 // Fluent Themes
 $fluent-flat: digest-schema($fluent-flat-button);
-$fluent-contained: digest-schema($fluent-raised-button);
+$fluent-contained: digest-schema($fluent-contained-button);
 $fluent-outlined: digest-schema($fluent-outlined-button);
 $fluent-fab: digest-schema($fluent-fab-button);
 
 // Bootstrap Themes
 $bootstrap-flat: digest-schema($bootstrap-flat-button);
-$bootstrap-contained: digest-schema($bootstrap-raised-button);
+$bootstrap-contained: digest-schema($bootstrap-contained-button);
 $bootstrap-outlined: digest-schema($bootstrap-outlined-button);
 $bootstrap-fab: digest-schema($bootstrap-fab-button);
 
 // Indigo Themes
 $indigo-flat: digest-schema($indigo-flat-button);
-$indigo-contained: digest-schema($indigo-raised-button);
+$indigo-contained: digest-schema($indigo-contained-button);
 $indigo-outlined: digest-schema($indigo-outlined-button);
 $indigo-fab: digest-schema($indigo-fab-button);
diff --git a/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss b/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss
index 8bc40cbde..8b9359ea9 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss
@@ -6,16 +6,8 @@ $contained-theme: $bootstrap-contained;
 $outlined-theme: $bootstrap-outlined;
 
 [part='base'] {
-    border-radius: var-get($flat-theme, 'border-radius');
-    width: var-get($flat-theme, 'size');
-    height: var-get($flat-theme, 'size');
     transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out;
-    color: var-get($flat-theme, 'foreground');
     padding: pad(7.5px, 9px, 12px);
-
-    igc-icon {
-        color: var-get($flat-theme, 'foreground');
-    }
 }
 
 :host([variant='flat']) {
@@ -24,21 +16,10 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
 
     [part='base'] {
-        &:hover {
-            color: var-get($flat-theme, 'hover-foreground');
-        }
-    
-        &:focus,
         &:active {
-            color: var-get($flat-theme, 'focus-foreground');
-            background: var-get($flat-theme, 'focus-background');
             box-shadow: none;
         }
     }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($flat-theme, 'border-radius');
-    }
 }
 
 :host([variant='contained']) {
@@ -47,27 +28,15 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
 
     [part='base'] {
-        color: var-get($contained-theme, 'foreground');
-        background: var-get($contained-theme, 'background');
-
-        &:hover {
-            background: var-get($contained-theme, 'focus-background');
-        }
-
         &:focus,
-        &:active {
-            background: var-get($contained-theme, 'focus-background');
+        &:focus-within {
             box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'focus-border-color');
         }
 
-        igc-icon {
-            color: var-get($contained-theme, 'foreground');
+        &:active {
+            box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'focus-border-color');
         }
     }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($contained-theme, 'border-radius');
-    }
 }
 
 :host([variant='outlined']) {
@@ -76,70 +45,30 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
 
     [part='base'] {
-        box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
-
-        &:hover {
-            color: var-get($outlined-theme, 'hover-foreground');
-            background: var-get($outlined-theme, 'focus-background');
-
+        &:hover {    
             igc-icon {
                 color: var-get($outlined-theme, 'hover-foreground');
             }
         }
 
         &:focus,
-        &:active {
-            color: var-get($outlined-theme, 'focus-foreground');
-            background: var-get($outlined-theme, 'focus-background');
+        &:focus-within {
             box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'focus-border-color');
 
             igc-icon {
                 color: var-get($outlined-theme, 'focus-foreground');
             }
         }
-    }
 
-    igc-icon {
-        color: var-get($outlined-theme, 'foreground');
-    }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($outlined-theme, 'border-radius');
-    }
-}
-
-:host([disabled]),
-:host(:disabled) {
-    [part='base'] {
-        color: var-get($flat-theme, 'disabled-foreground');
-        background: var-get($flat-theme, 'disabled-background');
-    }
-
-    igc-icon {
-        color: var-get($flat-theme, 'disabled-foreground');
-    }
-}
-
-:host([disabled][variant='contained']),
-:host(:disabled[variant='contained']) {
-    [part='base'] {
-        background: var-get($contained-theme, 'disabled-background');
-        color: var-get($contained-theme, 'disabled-foreground');
-    }
-
-    igc-icon {
-        color: var-get($contained-theme, 'disabled-foreground');
+        &:active {
+            box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'focus-border-color');
+        }
     }
 }
 
 :host([disabled][variant='outlined']),
 :host(:disabled[variant='outlined']) {
     [part='base'] {
-        color: var-get($outlined-theme, 'disabled-foreground');
         box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'disabled-border-color');
     }
-
-    igc-icon {
-        color: var-get($outlined-theme, 'disabled-foreground');
-    }
 }
diff --git a/src/components/button/themes/icon-button/shared/icon-button.common.scss b/src/components/button/themes/icon-button/shared/icon-button.common.scss
new file mode 100644
index 000000000..2941ae13d
--- /dev/null
+++ b/src/components/button/themes/icon-button/shared/icon-button.common.scss
@@ -0,0 +1,154 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$flat-theme: $material-flat;
+$contained-theme: $material-contained;
+$outlined-theme: $material-outlined;
+
+[part='base'] {
+    border-radius: var-get($flat-theme, 'border-radius');
+    width: var-get($flat-theme, 'size');
+    height: var-get($flat-theme, 'size');
+}
+
+:host([variant='flat']) {
+    @include css-vars-from-theme($flat-theme, 'ig-icon-button');
+
+    --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
+
+    [part='base'] {
+        color: var-get($flat-theme, 'foreground');
+        background: var-get($flat-theme, 'background');
+
+        &:hover {
+            background: var-get($flat-theme, 'hover-background');
+            color: var-get($flat-theme, 'hover-foreground');
+        }
+    
+        &:focus,
+        &:focus-within {
+            background: var-get($flat-theme, 'focus-background');
+            color: var-get($flat-theme, 'focus-foreground');
+        }
+
+        &:active {
+            background: var-get($flat-theme, 'active-background');
+            color: var-get($flat-theme, 'active-foreground');
+        }
+    }
+
+    igc-icon {
+        color: var-get($flat-theme, 'foreground');
+    }
+
+    ::slotted(igc-ripple) {
+        border-radius: var-get($flat-theme, 'border-radius');
+    }
+}
+
+:host([variant='contained']) {
+    @include css-vars-from-theme($contained-theme, 'ig-icon-button');
+
+    --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
+
+    [part='base'] {
+        background: var-get($contained-theme, 'background');
+        color: var-get($contained-theme, 'foreground');
+
+        &:hover {
+            background: var-get($contained-theme, 'hover-background');
+            color: var-get($contained-theme, 'hover-foreground');
+        }
+
+        &:focus,
+        &:focus-within {
+            background: var-get($contained-theme, 'focus-background');
+            color: var-get($contained-theme, 'focus-foreground');
+        }
+
+        &:active {
+            background: var-get($contained-theme, 'active-background');
+            color: var-get($contained-theme, 'active-foreground');
+        }
+    }
+
+    igc-icon {
+        color: var-get($contained-theme, 'foreground');
+    }
+
+    ::slotted(igc-ripple) {
+        border-radius: var-get($contained-theme, 'border-radius');
+    }
+}
+
+:host([variant='outlined']) {
+    @include css-vars-from-theme($outlined-theme, 'ig-icon-button');
+
+    --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
+
+    [part='base'] {
+        color: var-get($outlined-theme, 'foreground');
+        background: var-get($outlined-theme, 'background');
+        box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
+
+        &:hover {
+            background: var-get($outlined-theme, 'hover-background');
+            color: var-get($outlined-theme, 'hover-foreground');
+        }
+
+        &:focus,
+        &:focus-within {
+            background: var-get($outlined-theme, 'focus-background');
+            color: var-get($outlined-theme, 'focus-foreground');
+        }
+
+        &:active {
+            background: var-get($outlined-theme, 'active-background');
+            color: var-get($outlined-theme, 'active-foreground');
+        }
+    }
+
+    igc-icon {
+        color: var-get($outlined-theme, 'foreground');
+    }
+
+    ::slotted(igc-ripple) {
+        border-radius: var-get($outlined-theme, 'border-radius');
+    }
+}
+
+:host([disabled]),
+:host(:disabled) {
+    [part='base'] {
+        background: var-get($flat-theme, 'disabled-background');
+        color: var-get($flat-theme, 'disabled-foreground');
+    }
+
+    igc-icon {
+        color: var-get($flat-theme, 'disabled-foreground');
+    }
+}
+
+:host([disabled][variant='contained']),
+:host(:disabled[variant='contained']) {
+    [part='base'] {
+        background: var-get($contained-theme, 'disabled-background');
+        color: var-get($contained-theme, 'disabled-foreground');
+    }
+
+    igc-icon {
+        color: var-get($contained-theme, 'disabled-foreground');
+    }
+}
+
+:host([disabled][variant='outlined']),
+:host(:disabled[variant='outlined']) {
+    [part='base'] {
+        background: var-get($outlined-theme, 'disabled-background');
+        color: var-get($outlined-theme, 'disabled-foreground');
+    }
+
+    igc-icon {
+        color: var-get($outlined-theme, 'disabled-foreground');
+    }
+}
diff --git a/src/components/button/themes/icon-button/shared/icon-button.fluent.scss b/src/components/button/themes/icon-button/shared/icon-button.fluent.scss
index b723f1b0c..cc6e31e5a 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.fluent.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.fluent.scss
@@ -7,13 +7,8 @@ $outlined-theme: $fluent-outlined;
 $outline-btn-indent: rem(2px);
 
 [part='base'] {
-    border-radius: var-get($flat-theme, 'border-radius');
-    background: var-get($flat-theme, 'background');
-    color: var-get($flat-theme, 'foreground');
     transition: color .15s ease-out, background .15s ease-out;
     box-shadow: none;
-    width: var-get($flat-theme, 'size');
-    height: var-get($flat-theme, 'size');
     padding: pad(4px, 6px, 7px);
 
     &::after {
@@ -26,29 +21,6 @@ $outline-btn-indent: rem(2px);
         height: calc(100% - (#{$outline-btn-indent} * 2));
         border-radius: calc(#{var-get($flat-theme, 'border-radius')} - #{$outline-btn-indent * 2});
     }
-
-    &:hover {
-        color: var-get($flat-theme, 'foreground');
-        background: var-get($flat-theme, 'hover-background');
-    }
-
-    &:focus {
-        color: var-get($flat-theme, 'foreground');
-        background: var-get($flat-theme, 'focus-background');
-    }
-
-    &:active {
-        color: var-get($flat-theme, 'foreground');
-        background: var-get($flat-theme, 'active-background');
-    }
-
-    &:focus-visible::after {
-        box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color');
-    }
-
-    igc-icon {
-        color: var-get($flat-theme, 'foreground');
-    }
 }
 
 :host([variant='flat']) {
@@ -56,8 +28,10 @@ $outline-btn-indent: rem(2px);
 
     --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
 
-    ::slotted(igc-ripple) {
-        border-radius: var-get($flat-theme, 'border-radius');
+    [part='base'] {
+        &:focus-visible::after {
+            box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color');
+        }
     }
 }
 
@@ -67,35 +41,10 @@ $outline-btn-indent: rem(2px);
     --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
 
     [part='base'] {
-        color: var-get($contained-theme, 'foreground');
-        background: var-get($contained-theme, 'background');
-
-        &:focus {
-            background: var-get($contained-theme, 'focus-background');
-        }
-
-        &:hover {
-            background: var-get($contained-theme, 'hover-background');
-        }
-
-        &:active,
-        &:focus-visible {
-            color: var-get($contained-theme, 'active-foreground');
-            background: var-get($contained-theme, 'active-background');
-        }
-
         &:focus-visible::after {
             box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-border-color');
         }
     }
-
-    igc-icon {
-        color: var-get($contained-theme, 'foreground');
-    }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($contained-theme, 'border-radius');
-    }
 }
 
 :host([variant='outlined']) {
@@ -104,41 +53,18 @@ $outline-btn-indent: rem(2px);
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
 
     [part='base'] {
-        color: var-get($outlined-theme, 'foreground');
-        box-shadow: 0 0 0 1px var-get($outlined-theme, 'border-color');
-
         &:focus {
-            background: var-get($outlined-theme, 'focus-background');
+            border-color: var-get($outlined-theme, 'focus-border-color');
         }
 
         &:hover,
         &:focus:hover,
         &:focus:active {
-            background: var-get($outlined-theme, 'active-background');
+            background: var-get($outlined-theme, 'hover-background');
         }
 
         &:focus-visible::after {
             box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
         }
     }
-
-    igc-icon {
-        color: var-get($outlined-theme, 'foreground');
-    }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($outlined-theme, 'border-radius');
-    }
-}
-
-:host([disabled]),
-:host(:disabled) {
-    [part='base'] {
-        color: var-get($flat-theme, 'disabled-foreground');
-        background: var-get($flat-theme, 'disabled-background');
-    }
-
-    igc-icon {
-        color: var-get($flat-theme, 'disabled-foreground');
-    }
 }
diff --git a/src/components/button/themes/icon-button/shared/icon-button.indigo.scss b/src/components/button/themes/icon-button/shared/icon-button.indigo.scss
index faff38cf2..36dcfd4ce 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.indigo.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.indigo.scss
@@ -6,28 +6,8 @@ $contained-theme: $indigo-contained;
 $outlined-theme: $indigo-outlined;
 
 [part='base'] {
-    border-radius: var-get($flat-theme, 'border-radius');
     transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out;
-    color: var-get($flat-theme, 'foreground');
-    width: var-get($flat-theme, 'size');
-    height: var-get($flat-theme, 'size');
     padding: pad(6px);
-
-    &:hover {
-        color: var-get($flat-theme, 'focus-foreground');
-        background: var-get($flat-theme, 'focus-background');
-    }
-
-    &:focus,
-    &:active {
-        color: var-get($flat-theme, 'focus-foreground');
-        background: var-get($flat-theme, 'focus-background');
-        box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
-    }
-
-    igc-icon {
-        color: var-get($flat-theme, 'foreground');
-    }
 }
 
 :host([variant='flat']) {
@@ -35,8 +15,13 @@ $outlined-theme: $indigo-outlined;
 
     --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
 
-    ::slotted(igc-ripple) {
-        border-radius: var-get($flat-theme, 'border-radius');
+    [part='base'] {
+        &:focus,
+        &:focus-within,
+        &:active {
+            border-color: var-get($flat-theme, 'border-color');
+            box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
+        }
     }
 }
 
@@ -46,27 +31,20 @@ $outlined-theme: $indigo-outlined;
     --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
 
     [part='base'] {
-        color: var-get($contained-theme, 'foreground');
-        background: var-get($contained-theme, 'background');
+        border: rem(1px) solid var-get($contained-theme, 'border-color');
 
-        &:hover {
-            background: var-get($contained-theme, 'focus-background');
+        &:focus,
+        &:focus-visible {
+            border-color: var-get($contained-theme, 'focus-border-color');
         }
 
         &:focus,
+        &:focus-visible,
         &:active {
-            background: var-get($contained-theme, 'focus-background');
+            border-color: var-get($contained-theme, 'border-color');
             box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color');
         }
     }
-
-    igc-icon {
-        color: var-get($contained-theme, 'foreground');
-    }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($contained-theme, 'border-radius');
-    }
 }
 
 :host([variant='outlined']) {
@@ -88,40 +66,27 @@ $outlined-theme: $indigo-outlined;
 
         &:hover,
         &:focus:hover {
-            color: var-get($outlined-theme, 'focus-foreground');
-            background: var-get($outlined-theme, 'focus-background');
+            background: var-get($outlined-theme, 'hover-background');
+            color: var-get($outlined-theme, 'hover-foreground');
         }
 
         &:focus,
+        &:focus-within {
+            border-color: var-get($outlined-theme, 'focus-border-color');
+        }
+
+        &:focus,
+        &:focus-visible,
         &:active {
-            background: var-get($outlined-theme, 'background');
-            color: var-get($outlined-theme, 'focus-foreground');
+            border-color: var-get($outlined-theme, 'border-color');
             box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');
         }
     }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($outlined-theme, 'border-radius');
-    }
 }
 
 :host([disabled]),
 :host(:disabled) {
     [part='base'] {
-        color: var-get($flat-theme, 'disabled-foreground');
-        background: var-get($flat-theme, 'disabled-background');
         box-shadow: none;
     }
-
-    igc-icon {
-        color: var-get($flat-theme, 'disabled-foreground');
-    }
-}
-
-:host([disabled][variant='contained']),
-:host(:disabled[variant='contained']) {
-    [part='base'] {
-        background: var-get($contained-theme, 'disabled-background');
-        color: var-get($contained-theme, 'disabled-foreground');
-    }
 }
diff --git a/src/components/button/themes/icon-button/shared/icon-button.material.scss b/src/components/button/themes/icon-button/shared/icon-button.material.scss
index abe1cb1b8..5ebd5090a 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.material.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.material.scss
@@ -6,21 +6,12 @@ $contained-theme: $material-contained;
 $outlined-theme: $material-outlined;
 
 [part='base'] {
-    border-radius: var-get($flat-theme, 'border-radius');
-    width: var-get($flat-theme, 'size');
-    height: var-get($flat-theme, 'size');
     padding: pad(6px);
-    color: var-get($flat-theme, 'foreground');
-
-    igc-icon {
-        color: var-get($flat-theme, 'foreground');
-    }
 }
 
 :host(:focus-within) {
     [part='base'] {
         transition: none;
-        background: var-get($flat-theme, 'focus-background');
         box-shadow: inset 0 0 0 1px var-get($flat-theme, 'focus-border-color');
     }
 }
@@ -29,74 +20,29 @@ $outlined-theme: $material-outlined;
     @include css-vars-from-theme($flat-theme, 'ig-icon-button');
 
     --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($flat-theme, 'border-radius');
-    }
 }
 
 :host([variant='contained']) {
     @include css-vars-from-theme($contained-theme, 'ig-icon-button');
 
     --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
-
-    [part='base'] {
-        background: var-get($contained-theme, 'background');
-    }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($contained-theme, 'border-radius');
-    }
-}
-
-:host([variant='contained']:focus-within) {
-    [part='base'] {
-        background: var-get($contained-theme, 'focus-background');
-    }
 }
 
 :host([variant='outlined']) {
     @include css-vars-from-theme($outlined-theme, 'ig-icon-button');
 
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
-
-    [part='base'] {
-        box-shadow: inset 0 0 0 1px var-get($outlined-theme, 'border-color');
-    }
-
-    ::slotted(igc-ripple) {
-        border-radius: var-get($outlined-theme, 'border-radius');
-    }
 }
 
 :host([variant='outlined']:focus-within) {
     [part='base'] {
-        box-shadow: inset 0 0 0 1px var-get($flat-theme, 'focus-border-color');
-    }
-}
-
-:host([disabled]),
-:host(:disabled) {
-    [part='base'] {
-        color: var-get($flat-theme, 'disabled-foreground');
-    }
-
-    igc-icon {
-        color: var-get($flat-theme, 'disabled-foreground');
-    }
-}
-
-:host([disabled][variant='contained']),
-:host(:disabled[variant='contained']) {
-    [part='base'] {
-        background: var-get($contained-theme, 'disabled-background');
+        box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
     }
 }
 
-:host(:disabled[variant='outlined']),
-:host([disabled][variant='outlined']) {
+:host([disabled][variant='outlined']),
+:host(:disabled[variant='outlined']) {
     [part='base'] {
-        background: var-get($outlined-theme, 'disabled-background');
-        box-shadow: inset 0 0 0 1px var-get($outlined-theme, 'disabled-border-color');
+        box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'disabled-border-color');
     }
 }
diff --git a/src/components/button/themes/icon-button/themes.ts b/src/components/button/themes/icon-button/themes.ts
index 1e7bc0949..a61399af4 100644
--- a/src/components/button/themes/icon-button/themes.ts
+++ b/src/components/button/themes/icon-button/themes.ts
@@ -12,6 +12,7 @@ import { styles as indigoLight } from './light/icon-button.indigo.css.js';
 import { styles as materialLight } from './light/icon-button.material.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/icon-button.bootstrap.css.js';
+import { styles as shared } from './shared/icon-button.common.css.js';
 import { styles as fluent } from './shared/icon-button.fluent.css.js';
 import { styles as indigo } from './shared/icon-button.indigo.css.js';
 import { styles as material } from './shared/icon-button.material.css.js';
@@ -19,31 +20,31 @@ import { Themes } from '../../../../theming/types.js';
 
 const light = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
+    ${shared} ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${shared} ${material} ${materialLight}
   `,
   fluent: css`
-    ${fluent} ${fluentLight}
+    ${shared} ${fluent} ${fluentLight}
   `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${shared} ${indigo} ${indigoLight}
   `,
 };
 
 const dark = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
+    ${shared} ${bootstrap} ${bootstrapDark}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${shared} ${material} ${materialDark}
   `,
   fluent: css`
-    ${fluent} ${fluentDark}
+    ${shared} ${fluent} ${fluentDark}
   `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${shared} ${indigo} ${indigoDark}
   `,
 };