sly orbit
I have three lights in a vertical card view on my Home Screen. TV and Couch are actual lights, Rivendell is a power socket I set to show as a light.
As you can see on the screenshots the icons for all three lights behave differently. The first one is when they are turned off, the second when they are turned on. Where do I set the icons shown for each state?
delicate temple
I could be wrong on this but I wanna say the icons are handled by the integration supporting the device. (For the switch acting as a light, that's just how HA handles it.) There's probably no easy fix for something like that other than customization.
Consider a card with more customization options such as custom:button-card, Mushroom card or by applying some card_mod with templating to handle the states & icons.
type: custom:button-card
entity: light.living_room_lights
name: Living Room
aspect_ratio: 1/1
state:
- value: "on"
color: yellow
icon: mdi:lightbulb-on
- value: "off"
color: gray
icon: mdi:lightbulb-outline
styles:
card:
- background-color: black
type: custom:mushroom-template-card
entity: light.living_room_lights
primary: Living Room
icon: |
{{ (states(config.entity) == 'on') | iif('mdi:lightbulb-on',
'mdi:lightbulb-outline') }}
icon_color: |
{% if is_state(config.entity, 'on') %} yellow
{% else %} gray
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'off') %}
background-color: black
{% endif %}
}
type: button
entity: light.living_room_lights
name: Living Room
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'on') %}
--card-mod-icon: mdi:lightbulb-on;
--card-mod-icon-color: yellow;
{% else %}
--card-mod-icon: mdi:lightbulb-outline;
--card-mod-icon-color: gray;
background-color: black;
{% endif %}
The downside about doing this is you have to apply your customizations to each button. The custom:button-card can use configuration templates to easily reuse bits of codes. (It is also possible to reuse bits of code like the card_mod sections but that's getting into some more advanced stuff like manually editing the dashboard's code and using YAML anchors.) Also, with a little bit of work, the custom:button-card can be made to look however you want it to look including the stock Button card.
sly orbit
I could be wrong on this but I wanna say the icons are handled by the integratio...
I played around a bit more and I fixed it.
The issue was that the couch light had the lightbulb icon set in its entity and that overwrites the settings in the card. So all I had to do was removing the custom icon setting in the entities and the card edit view.
I don’t know how the color of the left button was fixed, though, but I just take it.
delicate temple
I played around a bit more and I fixed it.
The issue was that the couch light ...
I forgot about that. When an icon is defined, it loses its on/off icon capability.