From 841eb508d9a4c2270f0803aee8eeadab73ea247f Mon Sep 17 00:00:00 2001
From: Christiaan de Ridder <christiaan@channelengine.com>
Date: Sat, 11 Jan 2025 19:19:20 +0100
Subject: [PATCH] Fix button icon alignment

---
 package-lock.json | 18 +++++++++-----
 package.json      |  1 +
 src/card.ts       | 62 ++++++++++++++++++++++++++++++-----------------
 src/styles.ts     |  8 +++---
 4 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index df46868..4400cb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@mdi/js": "^7.4.47",
         "@swc/helpers": "^0.5.11",
         "custom-card-helpers": "^1.9.0",
         "home-assistant-js-websocket": "^9.4.0",
@@ -273,6 +274,11 @@
         "win32"
       ]
     },
+    "node_modules/@mdi/js": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
+    },
     "node_modules/@mischnic/json-sourcemap": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@mischnic/json-sourcemap/-/json-sourcemap-0.1.1.tgz",
@@ -3178,9 +3184,9 @@
       "peer": true
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
@@ -3471,9 +3477,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.79.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
-      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "version": "2.79.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
diff --git a/package.json b/package.json
index 9f95711..e1519d8 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "parcel": "^2.12.0"
   },
   "dependencies": {
+    "@mdi/js": "^7.4.47",
     "@swc/helpers": "^0.5.11",
     "custom-card-helpers": "^1.9.0",
     "home-assistant-js-websocket": "^9.4.0",
diff --git a/src/card.ts b/src/card.ts
index 134ea94..0316862 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1,4 +1,21 @@
 import { LitElement, html } from "lit"
+import {
+    mdiFan,
+    mdiFanAuto,
+    mdiFanOff,
+    mdiFanSpeed1,
+    mdiFanSpeed2,
+    mdiFanSpeed3,
+    mdiArrowRightThin,
+    mdiArrowLeftThin,
+    mdiHome,
+    mdiWeatherWindy,
+    mdiAirFilter,
+    mdiMoleculeCo2,
+    mdiValve,
+    mdiValveOpen,
+    mdiValveClosed
+} from "@mdi/js";
 import { customElement, state } from 'lit/decorators';
 import { styles } from "./styles";
 import { HassEntity } from "home-assistant-js-websocket";
@@ -62,11 +79,11 @@ export class BrinkRenoventHruCard extends LitElement {
 
     private ha;
     private fanModes = [
-        { value: "Auto", icon: "mdi:fan-auto", canOverride: true, },
-        { value: "Holiday", icon: "mdi:fan-off", canOverride: false },
-        { value: "Reduced", icon: "mdi:fan-speed-1", canOverride: false },
-        { value: "Normal", icon: "mdi:fan-speed-2", canOverride: true },
-        { value: "High", icon: "mdi:fan-speed-3", canOverride: true }
+        { value: "Auto", icon: mdiFan, canOverride: true, },
+        { value: "Holiday", icon: mdiFanOff, canOverride: false },
+        { value: "Reduced", icon: mdiFanSpeed1, canOverride: false },
+        { value: "Normal", icon: mdiFanSpeed2, canOverride: true },
+        { value: "High", icon: mdiFanSpeed3, canOverride: true }
     ];
 
     public static styles = styles;
@@ -141,10 +158,10 @@ export class BrinkRenoventHruCard extends LitElement {
     private renderAirTemperature() {
         return html `
             <div class="hru-temperature-line ${this.entityStateClass(this.outdoorAirTemperature)}" .entity=${this.outdoorAirTemperature} @click=${this.moreInfo}>
-                <ha-icon icon="mdi:arrow-right-thin"></ha-icon> ${this.renderTemperature(this.outdoorAirTemperature)}
+                <ha-svg-icon .path=${mdiArrowRightThin}></ha-svg-icon> ${this.renderTemperature(this.outdoorAirTemperature)}
             </div>
             <div class="hru-temperature-line ${this.entityStateClass(this.indoorAirTemperature)}" .entity=${this.indoorAirTemperature} @click=${this.moreInfo}>
-                <ha-icon icon="mdi:arrow-left-thin"></ha-icon> ${this.renderTemperature(this.indoorAirTemperature)}
+                <ha-svg-icon .path=${mdiArrowLeftThin}></ha-svg-icon> ${this.renderTemperature(this.indoorAirTemperature)}
             </div>
         `;
     }
@@ -161,11 +178,10 @@ export class BrinkRenoventHruCard extends LitElement {
     private renderZones() {
         return html`
             <div>
-            
                 ${this.renderZoneValvePosition(this.zoneValvePosition)}
                 ${this.renderAirFlow(this.airFlow)}
                 ${this.renderBypassValvePosition(this.bypassValvePosition)}
-                ${this.renderAirFilterState(this.bypassValvePosition)}
+                ${this.renderAirFilterState(this.airFilter)}
             </div>
             <div>
                 ${this.renderCO2Level(this.co2Level1)}
@@ -181,7 +197,7 @@ export class BrinkRenoventHruCard extends LitElement {
 
         return html`
             <div class="hru-zone-line" .entity=${entity} @click=${this.moreInfo}>
-                <ha-icon icon="mdi:home"></ha-icon> ${entity.state}
+                <ha-svg-icon .path=${mdiHome}></ha-svg-icon> ${entity.state}
             </div>
         `;
     }
@@ -191,7 +207,7 @@ export class BrinkRenoventHruCard extends LitElement {
 
         return html`
             <div class="hru-zone-line" .entity=${entity} @click=${this.moreInfo}>
-                <ha-icon icon="mdi:weather-windy"></ha-icon> ${entity.state}${entity.attributes.unit_of_measurement}
+                <ha-svg-icon .path=${mdiWeatherWindy}></ha-svg-icon> ${entity.state}${entity.attributes.unit_of_measurement}
             </div>
         `;
     }
@@ -201,7 +217,7 @@ export class BrinkRenoventHruCard extends LitElement {
 
         return html`
             <div class="hru-zone-line" .entity=${entity} @click=${this.moreInfo}>
-                <ha-icon icon=${this.bypassValveIcon()} class=${this.bypassValveStateClass()}></ha-icon> ${entity.state}
+                <ha-svg-icon .path=${mdiWeatherWindy} class=${this.bypassValveStateClass()}></ha-svg-icon> ${entity.state}
             </div>
         `;
     }
@@ -211,7 +227,7 @@ export class BrinkRenoventHruCard extends LitElement {
 
         return html`
             <div class="hru-zone-line" .entity=${entity} @click=${this.moreInfo}>
-                <ha-icon icon="mdi:air-filter" class=${this.airFilterStateClass()}></ha-icon> ${entity.state}
+                <ha-svg-icon .path=${mdiAirFilter} class=${this.airFilterStateClass()}></ha-svg-icon> ${entity.state}
             </div>
         `;
     }
@@ -221,7 +237,7 @@ export class BrinkRenoventHruCard extends LitElement {
 
         return html`
             <div class="hru-zone-line" .entity=${entity} @click=${this.moreInfo}>
-                <ha-icon icon="mdi:molecule-co2"></ha-icon> ${entity.state}${entity.attributes.unit_of_measurement}
+                <ha-svg-icon .path=${mdiMoleculeCo2}></ha-svg-icon> ${entity.state}${entity.attributes.unit_of_measurement}
             </div>
         `;
     }
@@ -231,13 +247,15 @@ export class BrinkRenoventHruCard extends LitElement {
 
         return this.fanModes.map((button) =>
             html `
-                <mwc-icon-button
+                <ha-icon-button
                     .value=${button.value}
                     .entity=${this.fanModeWrite}
                     @click=${this.setFanMode}
-                    .disabled=${!button.canOverride}>
-                    <ha-icon icon=${button.icon} class=${this.fanModeStateClass(button.value, button.canOverride)}></ha-icon>
-                </mwc-icon-button>
+                    .disabled=${!button.canOverride}
+                    .path=${button.icon}
+                    class=${this.fanModeStateClass(button.value, button.canOverride)}
+                    >
+                </ha-icon-button>
             `);
     }
 
@@ -267,10 +285,10 @@ export class BrinkRenoventHruCard extends LitElement {
     }
 
     private bypassValveIcon() {
-        if (!this.bypassValvePosition) return "mdi:valve";
-        if (this.bypassValvePosition.state === "Open") return "mdi:valve-open";
-        if (this.bypassValvePosition.state === "Closed") return "mdi:valve-closed";
-        return "mdi:valve";
+        if (!this.bypassValvePosition) return mdiValve;
+        if (this.bypassValvePosition.state === "Open") return mdiValveOpen;
+        if (this.bypassValvePosition.state === "Closed") return mdiValveClosed;
+        return mdiValve;
     }
 
     private bypassValveStateClass() {
diff --git a/src/styles.ts b/src/styles.ts
index c0bcc21..0822dcf 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -81,10 +81,6 @@ export const styles = css`
         left: -15px;
     }
 
-    ha-icon {
-        padding-top: -10px;
-    }
-
     .hru-temperature .hru-temperature-line {
         border: 3px solid var(--primary-text-color);
         border-left: 0 none;
@@ -97,4 +93,8 @@ export const styles = css`
         justify-content: center;
         width: 60px;
     }
+
+    ha-icon-button ha-icon {
+        vertical-align: text-bottom;
+    }
 `
\ No newline at end of file