diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts
index 6fa3a084b3..97e7d116ef 100644
--- a/src/components/ha-icon-button-arrow-next.ts
+++ b/src/components/ha-icon-button-arrow-next.ts
@@ -12,19 +12,8 @@ export class HaIconButtonArrowNext extends LitElement {
 
   @property() public label?: string;
 
-  @state() private _icon = mdiArrowRight;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this._icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiArrowRight
-          : mdiArrowLeft;
-    }, 100);
-  }
+  @state() private _icon =
+    document.dir === "ltr" ? mdiArrowRight : mdiArrowLeft;
 
   protected render(): TemplateResult {
     return html`
diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts
index 76a78843d2..e8927d7e95 100644
--- a/src/components/ha-icon-button-arrow-prev.ts
+++ b/src/components/ha-icon-button-arrow-prev.ts
@@ -12,19 +12,8 @@ export class HaIconButtonArrowPrev extends LitElement {
 
   @property() public label?: string;
 
-  @state() private _icon = mdiArrowLeft;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this._icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiArrowLeft
-          : mdiArrowRight;
-    }, 100);
-  }
+  @state() private _icon =
+    document.dir === "ltr" ? mdiArrowLeft : mdiArrowRight;
 
   protected render(): TemplateResult {
     return html`
diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts
index ffceb3fd13..99793cf4a7 100644
--- a/src/components/ha-icon-button-next.ts
+++ b/src/components/ha-icon-button-next.ts
@@ -12,19 +12,8 @@ export class HaIconButtonNext extends LitElement {
 
   @property() public label?: string;
 
-  @state() private _icon = mdiChevronRight;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this._icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiChevronRight
-          : mdiChevronLeft;
-    }, 100);
-  }
+  @state() private _icon =
+    document.dir === "ltr" ? mdiChevronRight : mdiChevronLeft;
 
   protected render(): TemplateResult {
     return html`
diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts
index 44c7c49aa1..b1499b96c2 100644
--- a/src/components/ha-icon-button-prev.ts
+++ b/src/components/ha-icon-button-prev.ts
@@ -12,19 +12,8 @@ export class HaIconButtonPrev extends LitElement {
 
   @property() public label?: string;
 
-  @state() private _icon = mdiChevronLeft;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this._icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiChevronLeft
-          : mdiChevronRight;
-    }, 100);
-  }
+  @state() private _icon =
+    document.dir === "ltr" ? mdiChevronLeft : mdiChevronRight;
 
   protected render(): TemplateResult {
     return html`
diff --git a/src/components/ha-icon-next.ts b/src/components/ha-icon-next.ts
index 0752f492fe..041b93338f 100644
--- a/src/components/ha-icon-next.ts
+++ b/src/components/ha-icon-next.ts
@@ -4,17 +4,7 @@ import { HaSvgIcon } from "./ha-svg-icon";
 
 @customElement("ha-icon-next")
 export class HaIconNext extends HaSvgIcon {
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this.path =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiChevronRight
-          : mdiChevronLeft;
-    }, 100);
-  }
+  path = document.dir === "ltr" ? mdiChevronRight : mdiChevronLeft;
 }
 
 declare global {
diff --git a/src/components/ha-icon-prev.ts b/src/components/ha-icon-prev.ts
index f6744a1b20..7f039ed8ff 100644
--- a/src/components/ha-icon-prev.ts
+++ b/src/components/ha-icon-prev.ts
@@ -4,17 +4,7 @@ import { HaSvgIcon } from "./ha-svg-icon";
 
 @customElement("ha-icon-prev")
 export class HaIconPrev extends HaSvgIcon {
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this.path =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiChevronLeft
-          : mdiChevronRight;
-    }, 100);
-  }
+  path = document.dir === "ltr" ? mdiChevronLeft : mdiChevronRight;
 }
 
 declare global {