diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index 5a215f3907..57f2a2bbf4 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -12,8 +12,9 @@ export class HaFab extends Fab {
   static override styles = Fab.styles.concat([
     css`
       .mdc-fab--extended .mdc-fab__icon {
-        margin-left: var(--rtl-12px, -8px) !important;
-        margin-right: var(--rtl--8px, 12px) !important;
+        margin-inline-start: -8px !important;
+        margin-inline-end: 12px !important;
+        direction: var(--direction) !important;
       }
     `,
   ]);
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index be798b6dc3..10eacb090e 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -1,6 +1,6 @@
 import { atLeastVersion } from "../common/config/version";
 import { computeLocalize, LocalizeFunc } from "../common/translations/localize";
-import { computeRTL } from "../common/util/compute_rtl";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 import { debounce } from "../common/util/debounce";
 import {
   getHassTranslations,
@@ -187,18 +187,10 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
     }
 
     private _applyDirection(hass: HomeAssistant) {
-      if (computeRTL(hass)) {
-        this.style.direction = "rtl";
-        // apply custom properties used to fix RTL appearance throughout the system
-        this.style.setProperty("--rtl-12px", "12px");
-        this.style.setProperty("--rtl--8px", "-8px");
-        this.style.setProperty("--dir", "rtl");
-      } else {
-        // clear all custom properties (can't use "all" for this)
-        this.style.cssText = "";
-
-        this.style.direction = "ltr";
-      }
+      const direction = computeRTLDirection(hass);
+      this.style.direction = direction;
+      document.dir = direction;
+      this.style.setProperty("--direction", direction);
     }
 
     /**