diff --git a/src/components/ha-icon-next.ts b/src/components/ha-icon-next.ts
index 369d5fc43b..d6a16bc7bb 100644
--- a/src/components/ha-icon-next.ts
+++ b/src/components/ha-icon-next.ts
@@ -10,6 +10,7 @@ export class HaIconNext extends HaIcon {
         ? "hass:chevron-right"
         : "hass:chevron-left";
 
+    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
   }
 }
diff --git a/src/components/ha-icon-prev.ts b/src/components/ha-icon-prev.ts
index 924c0d1fed..8fa3c030e8 100644
--- a/src/components/ha-icon-prev.ts
+++ b/src/components/ha-icon-prev.ts
@@ -10,6 +10,7 @@ export class HaIconPrev extends HaIcon {
         ? "hass:chevron-left"
         : "hass:chevron-right";
 
+    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
     super.connectedCallback();
   }
 }
diff --git a/src/components/ha-paper-icon-button-arrow-next.ts b/src/components/ha-paper-icon-button-arrow-next.ts
index 2a399600ca..8d0914a0cb 100644
--- a/src/components/ha-paper-icon-button-arrow-next.ts
+++ b/src/components/ha-paper-icon-button-arrow-next.ts
@@ -10,12 +10,13 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonArrowNext extends paperIconButtonClass {
   public connectedCallback() {
-    super.connectedCallback();
-
     this.icon =
       window.getComputedStyle(this).direction === "ltr"
         ? "hass:arrow-right"
         : "hass:arrow-left";
+
+    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
+    super.connectedCallback();
   }
 }
 
diff --git a/src/components/ha-paper-icon-button-arrow-prev.ts b/src/components/ha-paper-icon-button-arrow-prev.ts
index d1cd7a0fd0..acac478b8f 100644
--- a/src/components/ha-paper-icon-button-arrow-prev.ts
+++ b/src/components/ha-paper-icon-button-arrow-prev.ts
@@ -10,12 +10,13 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonArrowPrev extends paperIconButtonClass {
   public connectedCallback() {
-    super.connectedCallback();
-
     this.icon =
       window.getComputedStyle(this).direction === "ltr"
         ? "hass:arrow-left"
         : "hass:arrow-right";
+
+    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
+    super.connectedCallback();
   }
 }
 
diff --git a/src/components/ha-paper-icon-button-next.ts b/src/components/ha-paper-icon-button-next.ts
index 28ca138277..5a137fc2d3 100644
--- a/src/components/ha-paper-icon-button-next.ts
+++ b/src/components/ha-paper-icon-button-next.ts
@@ -10,12 +10,13 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonNext extends paperIconButtonClass {
   public connectedCallback() {
-    super.connectedCallback();
-
     this.icon =
       window.getComputedStyle(this).direction === "ltr"
         ? "hass:chevron-right"
         : "hass:chevron-left";
+
+    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
+    super.connectedCallback();
   }
 }
 
diff --git a/src/components/ha-paper-icon-button-prev.ts b/src/components/ha-paper-icon-button-prev.ts
index 88b84bf621..06479fcd1f 100644
--- a/src/components/ha-paper-icon-button-prev.ts
+++ b/src/components/ha-paper-icon-button-prev.ts
@@ -10,12 +10,13 @@ const paperIconButtonClass = customElements.get(
 
 export class HaPaperIconButtonPrev extends paperIconButtonClass {
   public connectedCallback() {
-    super.connectedCallback();
-
     this.icon =
       window.getComputedStyle(this).direction === "ltr"
         ? "hass:chevron-left"
         : "hass:chevron-right";
+
+    // calling super after setting icon to have it consistently show the icon (otherwise not always shown)
+    super.connectedCallback();
   }
 }