diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index 563ee32e32..b36871e381 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -1,24 +1,25 @@
-import { Fab } from "@material/mwc-fab";
+import { FabBase } from "@material/mwc-fab/mwc-fab-base";
+import { styles } from "@material/mwc-fab/mwc-fab.css";
 import { customElement } from "lit/decorators";
 import { css } from "lit";
 
 @customElement("ha-fab")
-export class HaFab extends Fab {
+export class HaFab extends FabBase {
   protected firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
 
-  static override styles = Fab.styles.concat([
+  static override styles = [
+    styles,
     css`
-      :host-context([style*="direction: rtl;"])
-        .mdc-fab--extended
-        .mdc-fab__icon {
-        margin-left: 12px !important;
-        margin-right: calc(12px - 20px) !important;
+      :host .mdc-fab--extended .mdc-fab__icon {
+        margin-inline-start: -8px;
+        margin-inline-end: 12px;
+        direction: var(--direction);
       }
     `,
-  ]);
+  ];
 }
 
 declare global {
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 465ab0ad0c..7bbbf3ff3c 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -235,8 +235,8 @@ class ErrorLogCard extends LitElement {
       color: var(--warning-color);
     }
 
-    :host-context([style*="direction: rtl;"]) mwc-button {
-      direction: rtl;
+    mwc-button {
+      direction: var(--direction);
     }
   `;
 }
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index 76a37c6640..10eacb090e 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -180,12 +180,19 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
 
     private _applyTranslations(hass: HomeAssistant) {
       document.querySelector("html")!.setAttribute("lang", hass.language);
-      document.dir = computeRTLDirection(hass);
+      this._applyDirection(hass);
       this._loadCoreTranslations(hass.language);
       this.__loadedFragmetTranslations = new Set();
       this._loadFragmentTranslations(hass.language, hass.panelUrl);
     }
 
+    private _applyDirection(hass: HomeAssistant) {
+      const direction = computeRTLDirection(hass);
+      this.style.direction = direction;
+      document.dir = direction;
+      this.style.setProperty("--direction", direction);
+    }
+
     /**
      * Load translations from the backend
      * @param language language to fetch