diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index 8d73e8bda4..5a215f3907 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -12,7 +12,7 @@ export class HaFab extends Fab {
   static override styles = Fab.styles.concat([
     css`
       .mdc-fab--extended .mdc-fab__icon {
-        margin-left: var(--rtl-12px, calc(12px - 20px)) !important;
+        margin-left: var(--rtl-12px, -8px) !important;
         margin-right: var(--rtl--8px, 12px) !important;
       }
     `,
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index 30dd7578b7..be798b6dc3 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -192,10 +192,10 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         // 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("--rtl-dir", "rtl");
+        this.style.setProperty("--dir", "rtl");
       } else {
         // clear all custom properties (can't use "all" for this)
-        this.style = "";
+        this.style.cssText = "";
 
         this.style.direction = "ltr";
       }