feat: 🎨 hide icons

src/components/battery.ts

@@ -57,17 +57,20 @@ export const batteryElement = (
             })}
           </span>`
         : null}
-      <ha-icon
-        .icon=${battery.icon}
-        @click=${(e: { stopPropagation: () => void }) => {
-          main.openDetails(e, entities.battery?.state_of_charge!);
-        }}
-        @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
-          if (e.key === "Enter") {
-            main.openDetails(e, entities.battery?.state_of_charge!);
-          }
-        }}
-      ></ha-icon>
+      ${battery.icon !== " "
+        ? html` <ha-icon
+            id="battery-icon"
+            .icon=${battery.icon}
+            @click=${(e: { stopPropagation: () => void }) => {
+              main.openDetails(e, entities.battery?.state_of_charge!);
+            }}
+            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+              if (e.key === "Enter") {
+                main.openDetails(e, entities.battery?.state_of_charge!);
+              }
+            }}
+          />`
+        : null}
       ${entities.battery?.display_state === "two_way" ||
       entities.battery?.display_state === undefined ||
       (entities.battery?.display_state === "one_way_no_zero" && battery.state.toBattery > 0) ||

src/components/grid.ts

@@ -37,7 +37,7 @@ export const gridElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, grid, "grid")}
-      <ha-icon .icon=${grid.icon}></ha-icon>
+      ${grid.icon !== " " ? html` <ha-icon id="grid-icon" .icon=${grid.icon} />` : null}
       ${(entities.grid?.display_state === "two_way" ||
         entities.grid?.display_state === undefined ||
         (entities.grid?.display_state === "one_way_no_zero" && (grid.state.toGrid ?? 0) > 0) ||

src/components/home.ts

@@ -53,7 +53,7 @@ export const homeElement = (
     }}
   >
     ${generalSecondarySpan(main.hass, main, config, templatesObj, home, "home")}
-    <ha-icon .icon=${home.icon}></ha-icon>
+    ${home.icon !== " " ? html`<ha-icon id="home-icon" .icon=${home.icon} />` : null}
     ${homeUsageToDisplay}
     <svg class="home-circle-sections">
       ${

src/components/individualLeftBottomElement.ts

@@ -63,7 +63,7 @@ export const individualLeftBottomElement = (
       }}
     >
       ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, 1, "left-bottom")}
-      <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon}></ha-icon>
+      ${individualObj?.icon !== " " ? html` <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-bottom"
             >${individualObj?.showDirection

src/components/individualLeftTopElement.ts

@@ -38,7 +38,7 @@ export const individualLeftTopElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 0, "left-top")}
-      <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-left-top">
             ${individualObj?.showDirection

src/components/individualRightBottomElement.ts

@@ -46,7 +46,7 @@ export const individualRightBottomElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 3, "right-bottom")}
-      <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-right-bottom">
             ${individualObj?.showDirection

src/components/individualRightTopElement.ts

@@ -47,7 +47,7 @@ export const individualRightTopElement = (
       }}
     >
       ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 2, "right-top")}
-      <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon}></ha-icon>
+      ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-right-top">
             ${individualObj?.showDirection

src/components/nonFossil.ts

@@ -38,7 +38,7 @@ export const nonFossilElement = (
           }}
         >
           ${generalSecondarySpan(main.hass, main, config, templatesObj, nonFossil, "low-carbon")}
-          <ha-icon .icon=${nonFossil.icon} class="low-carbon"></ha-icon>
+          ${nonFossil.icon !== " " ? html` <ha-icon id="low-carbon-icon" .icon=${nonFossil.icon} />` : null}
           ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
           (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
             ? html`

src/components/solar.ts

@@ -32,7 +32,7 @@ export const solarElement = (
       }}
     >
       ${generalSecondarySpan(main.hass, main, config, templatesObj, solar, "solar")}
-      <ha-icon id="solar-icon" .icon=${solar.icon}></ha-icon>
+          ${solar.icon !== " " ? html` <ha-icon id="solar-icon" .icon=${solar.icon} />` : null}
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
         ? html` <span class="solar">
             ${displayValue(main.hass, config, solar.state.total, {