diff --git a/src/components/ha-outlined-button.ts b/src/components/ha-outlined-button.ts
index 36b9b0cec3ec..e4683469ca41 100644
--- a/src/components/ha-outlined-button.ts
+++ b/src/components/ha-outlined-button.ts
@@ -1,14 +1,11 @@
 import { css } from "lit";
 import { customElement } from "lit/decorators";
-import { OutlinedButton } from "@material/web/button/internal/outlined-button";
-import { styles as outlinedStyles } from "@material/web/button/internal/outlined-styles.css";
-import { styles as sharedStyles } from "@material/web/button/internal/shared-styles.css";
+import { MdOutlinedButton } from "@material/web/button/outlined-button";
 
 @customElement("ha-outlined-button")
-export class HaOutlinedButton extends OutlinedButton {
+export class HaOutlinedButton extends MdOutlinedButton {
   static override styles = [
-    sharedStyles,
-    outlinedStyles,
+    ...MdOutlinedButton.styles,
     css`
       :host {
         --ha-icon-display: block;
diff --git a/src/components/ha-outlined-icon-button.ts b/src/components/ha-outlined-icon-button.ts
index 7f6618d5024c..27a7d4fdcddc 100644
--- a/src/components/ha-outlined-icon-button.ts
+++ b/src/components/ha-outlined-icon-button.ts
@@ -1,21 +1,11 @@
 import { css } from "lit";
 import { customElement } from "lit/decorators";
-import { IconButton } from "@material/web/iconbutton/internal/icon-button";
-import { styles as outlinedStyles } from "@material/web/iconbutton/internal/outlined-styles.css";
-import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles.css";
+import { MdOutlinedIconButton } from "@material/web/iconbutton/outlined-icon-button";
 
 @customElement("ha-outlined-icon-button")
-export class HaOutlinedIconButton extends IconButton {
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      outlined: true,
-    };
-  }
-
+export class HaOutlinedIconButton extends MdOutlinedIconButton {
   static override styles = [
-    sharedStyles,
-    outlinedStyles,
+    ...MdOutlinedIconButton.styles,
     css`
       :host {
         --ha-icon-display: block;