diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts
index 06401f0e06..fa2917db6a 100644
--- a/src/components/ha-icon-button-arrow-next.ts
+++ b/src/components/ha-icon-button-arrow-next.ts
@@ -13,7 +13,7 @@ import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-arrow-next")
 export class HaIconButtonArrowNext extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -36,7 +36,7 @@ export class HaIconButtonArrowNext extends LitElement {
   protected render(): TemplateResult {
     return html`<mwc-icon-button
       .disabled=${this.disabled}
-      .label=${this.label || this.hass.localize("ui.common.next")}
+      .label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
     >
       <ha-svg-icon .path=${this._icon}></ha-svg-icon>
     </mwc-icon-button> `;
diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts
index fab1951371..c7fbada10d 100644
--- a/src/components/ha-icon-button-arrow-prev.ts
+++ b/src/components/ha-icon-button-arrow-prev.ts
@@ -13,7 +13,7 @@ import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-arrow-prev")
 export class HaIconButtonArrowPrev extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -37,7 +37,7 @@ export class HaIconButtonArrowPrev extends LitElement {
     return html`
       <mwc-icon-button
         .disabled=${this.disabled}
-        .label=${this.label || this.hass.localize("ui.common.back")}
+        .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
       >
         <ha-svg-icon .path=${this._icon}></ha-svg-icon>
       </mwc-icon-button>
diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts
index 0ffcd7e9bd..48eca31a4a 100644
--- a/src/components/ha-icon-button-next.ts
+++ b/src/components/ha-icon-button-next.ts
@@ -13,7 +13,7 @@ import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-next")
 export class HaIconButtonNext extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -37,7 +37,7 @@ export class HaIconButtonNext extends LitElement {
     return html`
       <mwc-icon-button
         .disabled=${this.disabled}
-        .label=${this.label || this.hass.localize("ui.common.next")}
+        .label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
       >
         <ha-svg-icon .path=${this._icon}></ha-svg-icon>
       </mwc-icon-button>
diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts
index b70f64c650..8b88afedda 100644
--- a/src/components/ha-icon-button-prev.ts
+++ b/src/components/ha-icon-button-prev.ts
@@ -13,7 +13,7 @@ import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-prev")
 export class HaIconButtonPrev extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -37,7 +37,7 @@ export class HaIconButtonPrev extends LitElement {
     return html`
       <mwc-icon-button
         .disabled=${this.disabled}
-        .label=${this.label || this.hass.localize("ui.common.back")}
+        .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
       >
         <ha-svg-icon .path=${this._icon}></ha-svg-icon>
       </mwc-icon-button>