I’m trying to customize my Home Assistant Lovelace dashboard to show dynamic icons for my smart RGB bulbs in an entities card. The goal is for the icon to change based on the light’s state (filled bulb mdi:lightbulb when on, outlined bulb mdi:lightbulb-off-outline when off) and reflect the light’s colour when on, while preserving full interactivity (on/off, brightness, colour control). I prefer the compact layout of the entities card over larger custom cards like Mushroom, as it fits my existing setup with areas (e.g., Living Room, Bedroom).
What I’ve Tried:
Initially, I used standard entities cards, but the default icons didn’t change dynamically with state or colour. I then tried adding customize in configuration.yaml with templated icons, but it didn’t work in Lovelace. Next, I installed card-mod via HACS and used it in Lovelace YAML to target .state-badge with Jinja2 templating (e.g., {% if is_state(‘light.entity’, ‘on’) %} mdi:lightbulb {% else %} mdi:lightbulb-off-outline {% endif %}). This worked for single-light cards but failed for multi-light cards (e.g., Living Room with three lights), showing incorrect or static icons. I also experimented with Mushroom Cards, installing them via HACS to use mushroom-light-card, which offered dynamic icons but resulted in larger cards, disrupted area organization, and unintuitive controls, so I reverted after testing. Another approach was creating template sensors to handle icon logic (e.g., icon_template), then displaying them in entities cards; the off icon worked (mdi:lightbulb-off-outline), but the on icon showed the old off icon, lost interactivity, and didn’t reflect colour. I adjusted the card-mod resource path from /hacsfiles/card-mod/card-mod.js to /homeassistant/www/community/lovelace-card-mod/card-mod.js (matching the File Editor path), confirming it loaded via browser inspect (script tag present), but icons still didn’t switch correctly. Finally, I tested card-mod with a static mdi:star icon to verify application, but saw no change.
Current State:
After fixing the resource path, interactivity has returned, but icons show mdi:lightbulb (filled) when off instead of mdi:lightbulb-off-outline. Browser inspect shows card-mod.js loading, but no errors or applied --card-mod-icon styles. HA version and setup details: I’m running Home Assistant Supervised on Debian 12, version 2025.4.4.
Goal:
I’m seeking a solution using entities cards that dynamically switches icons based on state (filled when on, outlined when off), reflects the light’s colour when on, and maintains full control (toggle, brightness, colour) via click, preferably avoiding custom cards like Mushroom to keep the layout compact and area-based.
Request:
I’ve hit a wall after several days and multiple AI-assisted attempts (limited by daily quotas and chat length warnings). Any advice, corrected YAML, or alternative approaches from the community would be greatly appreciated!