Similar to how door and window icons change based on their state, I want my refrigerator to change based on if it’s door is open or not. Specifically, I want the icon to change from mdi:fridge-variant-outline to mdi:fridge-variant. I still want the color to change to yellow as well if that matters. Where and how do I make this happen?
1 Like
Would this work with the mushroom template card where the icon can be controlled by a template?
It can be done in different places.
In a card, like a markdown.
type: markdown
content: |-
<center>
{%-if (states('person.guest')=='home')-%}
<font color="green"><ha-icon icon="mdi:home"></ha-icon></font>
{%-elif (states('person.guest')=='not_home')-%}
<font color="red"><ha-icon icon="mdi:home-outline"></ha-icon></font>
{%-else-%}
<font color="yellow"><ha-icon icon="mdi:help"></ha-icon></font>
{%-endif-%}
</center>
It can be done as a sensor template.
template:
- sensor:
- name: test
state: "{{ states('person.guest') }}"
icon: >-
{% if (states('person.guest')=='home') %}
mdi:home
{% elif (states('person.guest')=='not_home') %}
mdi:home-outline
{% else %}
mdi:help
{% endif %}
This works great to make a sensor icon that changes based on state. This sensor icon also works when added to a picture elements card in lieu of the original entity, but then the color won’t change based on state, even if the icon does.
So i went back and replaced the sensor with the original entity, hoping that would change. Unfortunately, the original icon stays the same, regardless of state. Is it possible to change the original icon based on state, so that it works across the board everywhere, including changing color as needed?
As you said:
What kind of sensor do you use to represent your refrigerator:
– is it a sensor or a binary_sensor?
– is it a template sensor/binary_sensor or from some integration?
Binary sensors (with or w/o a defined “device_class”) have a native support of icon color dependently on a state (on/off).
Sensors do not have a similar icon color support (exception - “device_class: battery”).
If you need to define an icon dynamically:
– if this is a template sensor/binary_sensor - define an icon inside a template;
– if this is a sensor/binary_sensor from some integration - your only option seems to be using card-mod (a “–card-mod-icon” variable); also, you may create a template sensor/binary_sensor based on this entity with a templated icon - but you need to define same “device_class” (in case of “binary_sensor”) if present.
You’re absolutely correct, moved template to binary_sensor.yaml and it worked as requested.
Dear community,
I have a Shelly 1 that opens the garage door, it is also configured as a binary sensor (garage type) that returns the state Closed and Open. I want to change the icon in the sub button accordingly. This is my code. The button and the returned state work fin, but I cannot get the icon to change. Can you help me?
type: custom:bubble-card
card_type: button
entity: switch.shelly1_227377
name: Garage door
card_layout: normal
tap_action:
action: toggle
sub_button:
- entity: binary_sensor.shelly1_227377_input
tap_action:
action: none
show_state: true
show_icon: true
styles: >
${subButtonIcon[1].setAttribute("icon",
hass.states['binary_sensor.shelly1_227377_input'].state === 'Closed' ?
'mdi:garage-variant' : 'mdi:garage-open-variant')}
show_icon: false
icon: ''
Try this
styles: |
${subButtonIcon[0].setAttribute("icon",
hass.states['binary_sensor.shelly1_227377_input'].state === 'Closed' ?
'mdi:garage-variant' : 'mdi:garage-open-variant')}
You needed subButtonIcon[0] vs subButtonIcon[1]
When I change the value to 0 it displays an open garage despite the closed state. If it is 1 it displays a closed garage.
Sorry I do not understand your comment that I need 0 vs 1. I thought the code changes the icon from open-variant to closed variant in case the state changes to closed. I am quite new here and thanks for your help.
I’m going to tag on here rather than create a new thread…
I am able to change the background colour based on a state, but I am unable to get the icon to change… I’ve been googling this for 20mins and find people changing the colour (and I know how to do that) but changing the actual icon is sending me in circles…
What am I doing wrong - I’ve tried a number different variants such as the below and I’m just stumped now
- type: template
tap_action:
action: toggle
icon: "{{ 'mdi:blinds-horizontal' if is_state('input_boolean.study_venetian_blind_helper', 'on') else 'mdi:blinds-horizontal-closed'}};"
entity: input_boolean.study_venetian_blind_helper
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(138, 205, 215, 1)' if is_state('input_boolean.study_venetian_blind_helper', 'on') else 'rgba(138, 205, 215, 0.3)'}};
padding: 5px;
border-radius: 100px!important;
}