diff --git a/src/components/ha-icon-next.ts b/src/components/ha-icon-next.ts
new file mode 100644
index 0000000000..3f4e9b5683
--- /dev/null
+++ b/src/components/ha-icon-next.ts
@@ -0,0 +1,25 @@
+import "@polymer/iron-icon/iron-icon";
+// Not duplicate, this is for typing.
+// tslint:disable-next-line
+import { HaIcon } from "./ha-icon";
+
+export class HaIconNext extends HaIcon {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this.icon =
+      window.getComputedStyle(this).direction === "ltr"
+        ? "hass:chevron-right"
+        : "hass:chevron-left";
+
+    this.fire("iron-resize");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-next": HaIconNext;
+  }
+}
+
+customElements.define("ha-icon-next", HaIconNext);
diff --git a/src/components/ha-icon-prev.ts b/src/components/ha-icon-prev.ts
new file mode 100644
index 0000000000..fe54bcf0af
--- /dev/null
+++ b/src/components/ha-icon-prev.ts
@@ -0,0 +1,25 @@
+import "@polymer/iron-icon/iron-icon";
+// Not duplicate, this is for typing.
+// tslint:disable-next-line
+import { HaIcon } from "./ha-icon";
+
+export class HaIconPrev extends HaIcon {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this.icon =
+      window.getComputedStyle(this).direction === "ltr"
+        ? "hass:chevron-left"
+        : "hass:chevron-right";
+
+    this.fire("iron-resize");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-prev": HaIconPrev;
+  }
+}
+
+customElements.define("ha-icon-prev", HaIconPrev);
diff --git a/src/components/ha-paper-icon-button-arrow-next.ts b/src/components/ha-paper-icon-button-arrow-next.ts
new file mode 100644
index 0000000000..2a399600ca
--- /dev/null
+++ b/src/components/ha-paper-icon-button-arrow-next.ts
@@ -0,0 +1,31 @@
+import { Constructor } from "lit-element";
+import "@polymer/paper-icon-button/paper-icon-button";
+// Not duplicate, this is for typing.
+// tslint:disable-next-line
+import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
+
+const paperIconButtonClass = customElements.get(
+  "paper-icon-button"
+) as Constructor<PaperIconButtonElement>;
+
+export class HaPaperIconButtonArrowNext extends paperIconButtonClass {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this.icon =
+      window.getComputedStyle(this).direction === "ltr"
+        ? "hass:arrow-right"
+        : "hass:arrow-left";
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-paper-icon-button-arrow-next": HaPaperIconButtonArrowNext;
+  }
+}
+
+customElements.define(
+  "ha-paper-icon-button-arrow-next",
+  HaPaperIconButtonArrowNext
+);
diff --git a/src/components/ha-paper-icon-button-arrow-prev.ts b/src/components/ha-paper-icon-button-arrow-prev.ts
new file mode 100644
index 0000000000..d1cd7a0fd0
--- /dev/null
+++ b/src/components/ha-paper-icon-button-arrow-prev.ts
@@ -0,0 +1,31 @@
+import { Constructor } from "lit-element";
+import "@polymer/paper-icon-button/paper-icon-button";
+// Not duplicate, this is for typing.
+// tslint:disable-next-line
+import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
+
+const paperIconButtonClass = customElements.get(
+  "paper-icon-button"
+) as Constructor<PaperIconButtonElement>;
+
+export class HaPaperIconButtonArrowPrev extends paperIconButtonClass {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this.icon =
+      window.getComputedStyle(this).direction === "ltr"
+        ? "hass:arrow-left"
+        : "hass:arrow-right";
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-paper-icon-button-arrow-prev": HaPaperIconButtonArrowPrev;
+  }
+}
+
+customElements.define(
+  "ha-paper-icon-button-arrow-prev",
+  HaPaperIconButtonArrowPrev
+);
diff --git a/src/components/ha-paper-icon-button-next.ts b/src/components/ha-paper-icon-button-next.ts
new file mode 100644
index 0000000000..28ca138277
--- /dev/null
+++ b/src/components/ha-paper-icon-button-next.ts
@@ -0,0 +1,28 @@
+import { Constructor } from "lit-element";
+import "@polymer/paper-icon-button/paper-icon-button";
+// Not duplicate, this is for typing.
+// tslint:disable-next-line
+import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
+
+const paperIconButtonClass = customElements.get(
+  "paper-icon-button"
+) as Constructor<PaperIconButtonElement>;
+
+export class HaPaperIconButtonNext extends paperIconButtonClass {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this.icon =
+      window.getComputedStyle(this).direction === "ltr"
+        ? "hass:chevron-right"
+        : "hass:chevron-left";
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-paper-icon-button-next": HaPaperIconButtonNext;
+  }
+}
+
+customElements.define("ha-paper-icon-button-next", HaPaperIconButtonNext);
diff --git a/src/components/ha-paper-icon-button-prev.ts b/src/components/ha-paper-icon-button-prev.ts
new file mode 100644
index 0000000000..88b84bf621
--- /dev/null
+++ b/src/components/ha-paper-icon-button-prev.ts
@@ -0,0 +1,28 @@
+import { Constructor } from "lit-element";
+import "@polymer/paper-icon-button/paper-icon-button";
+// Not duplicate, this is for typing.
+// tslint:disable-next-line
+import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
+
+const paperIconButtonClass = customElements.get(
+  "paper-icon-button"
+) as Constructor<PaperIconButtonElement>;
+
+export class HaPaperIconButtonPrev extends paperIconButtonClass {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this.icon =
+      window.getComputedStyle(this).direction === "ltr"
+        ? "hass:chevron-left"
+        : "hass:chevron-right";
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-paper-icon-button-prev": HaPaperIconButtonPrev;
+  }
+}
+
+customElements.define("ha-paper-icon-button-prev", HaPaperIconButtonPrev);