From 9140a9677c209d171f0a76eb6fc72206db24001a Mon Sep 17 00:00:00 2001
From: rosskyl <rosskyl@users.noreply.github.com>
Date: Fri, 12 Nov 2021 09:40:55 -0600
Subject: [PATCH 1/3] Update ha-icon-button to display icons

Add ha-icon to ha-icon-button to fix a breaking change from https://github.com/home-assistant/frontend/issues/10521
---
 src/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index 07a780c..59d9214 100644
--- a/src/index.js
+++ b/src/index.js
@@ -338,17 +338,17 @@ class BannerCard extends LitElement {
               icon="mdi:skip-previous"
               role="button"
               @click=${this._service(domain, "media_previous_track", entity)}
-            ></ha-icon-button>
+            ><ha-icon icon="mdi:skip-previous"></ha-icon></ha-icon-button>
             <ha-icon-button
               icon="${isPlaying ? "mdi:stop" : "mdi:play"}"
               role="button"
               @click=${this._service(domain, action, entity)}
-            ></ha-icon-button>
+            ><ha-icon icon="${isPlaying ? "mdi:stop" : "mdi:play"}"></ha-icon></ha-icon-button>
             <ha-icon-button
               icon="mdi:skip-next"
               role="button"
               @click=${this._service(domain, "media_next_track", entity)}
-            ></ha-icon-button>
+            ><ha-icon icon="mdi:skip-next"></ha-icon></ha-icon-button>
           </div>
         </div>
       </div>
@@ -404,18 +404,18 @@ class BannerCard extends LitElement {
             icon="hass:arrow-up"
             role="button"
             @click=${this._service("cover", "open_cover", entity)}
-          ></ha-icon-button>
+          ><ha-icon icon="hass:arrow-up"></ha-icon></ha-icon-button>
           <ha-icon-button
             icon="hass:stop"
             role="button"
             @click=${this._service("cover", "stop_cover", entity)}
-          ></ha-icon-button>
+          ><ha-icon icon="hass:stop"></ha-icon></ha-icon-button>
           <ha-icon-button
             ?disabled=${isclosed}
             icon="hass:arrow-down"
             role="button"
             @click=${this._service("cover", "close_cover", entity)}
-          ></ha-icon-button>
+          ><ha-icon icon="hass:arrow-down"></ha-icon></ha-icon-button>
         </span>
       </div>
     `;

From d55bf76e35214a0eb58a4ad09a19270eda0f50d2 Mon Sep 17 00:00:00 2001
From: Kyle <kjr1995@gmail.com>
Date: Fri, 12 Nov 2021 10:30:10 -0600
Subject: [PATCH 2/3] Fix disabled icons

---
 src/index.js  | 18 ++++++++++++------
 src/styles.js |  2 +-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/index.js b/src/index.js
index 59d9214..77c8720 100644
--- a/src/index.js
+++ b/src/index.js
@@ -338,17 +338,20 @@ class BannerCard extends LitElement {
               icon="mdi:skip-previous"
               role="button"
               @click=${this._service(domain, "media_previous_track", entity)}
-            ><ha-icon icon="mdi:skip-previous"></ha-icon></ha-icon-button>
+              ><ha-icon icon="mdi:skip-previous"></ha-icon
+            ></ha-icon-button>
             <ha-icon-button
               icon="${isPlaying ? "mdi:stop" : "mdi:play"}"
               role="button"
               @click=${this._service(domain, action, entity)}
-            ><ha-icon icon="${isPlaying ? "mdi:stop" : "mdi:play"}"></ha-icon></ha-icon-button>
+              ><ha-icon icon="${isPlaying ? "mdi:stop" : "mdi:play"}"></ha-icon
+            ></ha-icon-button>
             <ha-icon-button
               icon="mdi:skip-next"
               role="button"
               @click=${this._service(domain, "media_next_track", entity)}
-            ><ha-icon icon="mdi:skip-next"></ha-icon></ha-icon-button>
+              ><ha-icon icon="mdi:skip-next"></ha-icon
+            ></ha-icon-button>
           </div>
         </div>
       </div>
@@ -404,18 +407,21 @@ class BannerCard extends LitElement {
             icon="hass:arrow-up"
             role="button"
             @click=${this._service("cover", "open_cover", entity)}
-          ><ha-icon icon="hass:arrow-up"></ha-icon></ha-icon-button>
+            ><ha-icon ?disabled=${isopen} icon="hass:arrow-up"></ha-icon
+          ></ha-icon-button>
           <ha-icon-button
             icon="hass:stop"
             role="button"
             @click=${this._service("cover", "stop_cover", entity)}
-          ><ha-icon icon="hass:stop"></ha-icon></ha-icon-button>
+            ><ha-icon icon="hass:stop"></ha-icon
+          ></ha-icon-button>
           <ha-icon-button
             ?disabled=${isclosed}
             icon="hass:arrow-down"
             role="button"
             @click=${this._service("cover", "close_cover", entity)}
-          ><ha-icon icon="hass:arrow-down"></ha-icon></ha-icon-button>
+            ><ha-icon ?disabled=${isclosed} icon="hass:arrow-down"></ha-icon
+          ></ha-icon-button>
         </span>
       </div>
     `;
diff --git a/src/styles.js b/src/styles.js
index 275db38..ef0dece 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -130,7 +130,7 @@ export default css`
     width: 90%;
   }
 
-  .entity-value ha-icon {
+  .entity-value ha-icon:not([disabled]) {
     color: white;
   }
 

From cce446797ae19b828af8dd7fb98fe6d3242110a6 Mon Sep 17 00:00:00 2001
From: Kyle <kjr1995@gmail.com>
Date: Fri, 8 Apr 2022 09:08:52 -0500
Subject: [PATCH 3/3] Update mwc-switch to ha-switch

---
 src/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index 77c8720..ea1596d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -301,9 +301,9 @@ class BannerCard extends LitElement {
     const htmlContent = this.renderValue(
       { ...data, value, unit, click: action },
       () => html`
-        <mwc-button ?dense=${true} @click=${action}>
+        <ha-button ?dense=${true} @click=${action}>
           ${value} ${unit}
-        </mwc-button>
+        </ha-button>
       `
     );
     return html`
@@ -384,12 +384,12 @@ class BannerCard extends LitElement {
       <div class="entity-state" style="${this.grid(size)}">
         ${entityName(name, onClick)}
         <span class="entity-value">
-          <mwc-switch
+          <ha-switch
             style="--mdc-theme-secondary: ${color};"
             ?checked=${state === "on"}
             @click=${this._service(domain, "toggle", entity)}
           >
-          </mwc-switch>
+          </ha-switch>
         </span>
       </div>
     `;