The only other card I have is for a light which turns on at sunset and off at 10:00pm…which works perfectly…changes icons and colors
I changed the entity on the light card to switch.shelly_shsw_1_e8db84d7180f’ and it acts like the card we’ve been messing with so I’d say the answer is no…it doesn’t show the correct state…only the closed or off state.
sorry, at the edge of my knowledge here
All good my friend, I’m no expert, just picked up things along my journey with plenty of fails along the way too.
Since it shows correct in the Shelly app, try the following.
Go to Developer Tools → States and select your device switch.shelly_shsw_1_e8db84d7180f, I’ve got my Kitchen Plug here as an example.
Then turn it ON in the Shelly app.
Near Set state, Refresh. The state should change to ON.
If this is not happening, then looks like there is something broken somewhere.
For your device, I believe you need to put in a Host address.
See that this hasn’t changed in your router settings. If it’s changed, try and give it a FIXED address.
Some things you could try ???
Check your logs for any errors.
Clearing Cache.
Restart Home Assistant.
Worst case scenario, Uninstall/Reinstall the Shelly Integration and check all information is correct.
Just some troubleshooting to try. Let us know how you get on.
All the best 
wow, can’t thank you enough! It get’s weirder. I made the change in the developer tools. I can watch the state change from on to off and then back as I open and close the door. In another tab I have the overview page up and it actually worked once. I saw the icon change and the color. But it was only that one time. Even more confused now. Couple screen shots attached. Hopefully that tells you if I followed the instructions properly
The IP is static.
The log is full of entries like this for opening and closing
Garage Door Closed - Shelly Green has been triggered by state of binary_sensor.shelly_shsw_1_e8db84d7180f_switch by Garage binary switch
2:59:23 PM - 15 minutes ago - Show trace
Garage binary switch turned on
2:59:23 PM - 15 minutes ago
Garage Door Open - Shelly Red has been triggered by state of binary_sensor.shelly_shsw_1_e8db84d7180f_switch by Garage binary switch
2:58:23 PM - 16 minutes ago - Show trace
Garage binary switch turned off
2:58:23 PM - 16 minutes ago
It looks like your entity is wrong then. In the code
You have switch.shelly…, What happens when you put that binary_sensor entity into the code ?
Yeah, looks like if you change the code with the correct entity you should be good. That’s why nothing’s happening. Wrong entity.
And just 'cause my OCD is kicking in 
, why not just rename your device to something simple like
binary_sensor.garage_door
Try first with the exact entity details from the Developer Tools.
Take care 
I had the right entity…when I change it to the one with binary in it’s name the door doesn’t open or close. I think I had changed the state in the wrong entity. Not sure what, maybe I wasn’t waiting long enough for the icon and color to change but it’s working now!!!
I can’t thank you enough for hanging in there with me…really appreciate it!!
Thank you
Mike
All good 
Maybe mark your post as solved and share your final code.
Take care my friend
Thanks do much to @dexstar
final code:
type: custom:button-card
show_entity_picture: true
state:
- value: 'off'
icon: mdi:garage-open
color: red
- value: 'on'
icon: mdi:garage-lock
color: green
tap_action:
action: toggle
entity: binary_sensor.shelly_shsw_1_e8db84d7180f_switch
show_state: false
show_label: true
size: 20%
label: |
[[[
if (states['binary_sensor.shelly_shsw_1_e8db84d7180f_switch'].state === "on")
return "closed";
else if (states['binary_sensor.shelly_shsw_1_e8db84d7180f_switch'].state === "off")
return "open";
]]]
So, your initial entity, was wrong?
yes, seems so. I didn’t realize until I checked again just now. I thought I had tried the one which is working earlier. I was in this mode of trying different things and I got a bit lost.
thanks again!
Can someone help me out the background wont change
custom:button-card
entity: sensor.cyclus_gft
icon: true
show_name: false
show_state: true
secondairy_info: true
aspect_ratio: null
styles:
card:
- background-color: >-
{{ '#E8D727' if is_state('input_select.gft_afval_kleur','Niks') else
'#E8D747' }}
- background-size: cover
- border-radius: 2%
- height: 50%
grid:
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
- grid-template-areas: '"names s "'
custom_fields:
names: >
<span style= "font-size: 120%"> <span style= "color:white"> GFT
Afval:</span>
You have to use JS templates, not Jinja Templates. Look at the marked solution.
THNX I was doing stupid
Hi, it’s been a while, but I am just getting into custom:button-card and I would like to know how or where I set the colors for var(–icon-dark-color) and var(–icon-color), but I can’t see it in your example.
Is it in the theme? What if I want to customize it for each card?
Sorry… Yes in the theme:
icon-dark-color: "black"
Awesome, thanks.
OK, I have followed this post well, but I have another question I am trying to change the icon based on whether the volume is muted or not, I’m not sure where to put it.
type: custom:button-card
entity: media_player.rx_v483_fba621
tap_action:
action: call-service
service: media_player.volume_mute
service_data:
entity_id: media_player.rx_v483_fba621
is_volume_muted: |
[[[
return (states['media_player.rx_v483_fba621'].attributes.is_volume_muted) ? false : true;
]]]
Here is an example for changing icon based on state from my configuration:
- type: custom:button-card
entity: switch.chauffe_eau_cuisine
icon: >
[[[ if (entity.state == "on") return "mdi:water-boiler";
else return "mdi:water-boiler-off"; ]]]
I have followed this thread and tried a number of examples. I am new to HA and I am getting something wrong, but for the life of me I am not sure why it doesn’t work.
I want to change the ICON based on the state of the door sensor, and the COLOR based on the state of that sensor and light sensor, as follows:
if sensor.garage_door == OPEN then
set icon to open garage
set color to red
else
set icon to closed garage
if sensor.garage_lights == ON then
set color to orange
else
set color to green
endif
endif
I started slow, and I got icons and colors to change based on one sensor:
cards:
- show_name: true
show_icon: true
type: custom:button-card
entity: binary_sensor.garage_door_kiabmw
name: Garage
tap_action:
action: navigate
navigation_path: /dashboard-garage
state:
- value: 'on'
icon: mdi:garage-open-variant
color: red
- value: 'off'
icon: mdi:garage-variant
color: green
Now, I am close, and all I need to do is change that last “color: green” depending on the state of the lights. I tried the following (only showing the replacement for the last line above, so as not to make the post too long):
color: >
[[[
if (states['light.garage_light_all'].state == 'on') return "orange";
else return "green";
]]]
But nothing would happen. I thought the problem was with the conditional, so I tried the following:
color: '[[[ return "green"; ]]]'
and
color: >
[[[
return "green";
]]]
But none of it worked, for some reason.
Then I took a different approach, and I used the following:
cards:
- show_name: true
show_icon: true
type: custom:button-card
entity: binary_sensor.garage_door_kiabmw
name: Garage
tap_action:
action: navigate
navigation_path: /dashboard-garage
icon: >
[[[
if (entity.state == 'on')
return "mdi:garage-open-variant";
else
return "mdi:garage-variant";
]]]
color: >
[[[
if (entity.state == 'on')
return "red";
else if (states['light.garage_light_all'].state == 'on')
return "orange";
else
return "green";
]]]
And the icon part worked perfectly well, but the color part didn’t. That is, color did not change.
Not sure what I am doing wrong… Any advice much appreciated. Thanks
I was facing the same issue.
For some reason, the condition in "color: " was not taken into account.
But I found a working solution using "styles: ".
Based on your last example, you can try this :
cards:
- show_name: true
show_icon: true
type: custom:button-card
entity: binary_sensor.garage_door_kiabmw
name: Garage
tap_action:
action: navigate
navigation_path: /dashboard-garage
icon: >
[[[
if (entity.state == 'on')
return "mdi:garage-open-variant";
else
return "mdi:garage-variant";
]]]
styles:
icon:
- color: >
[[[
if (entity.state == 'on')
return "red";
else if (states['light.garage_light_all'].state == 'on')
return "orange";
else
return "green";
]]]
On my side I went with "states: " and "value: " which can be easier, so something like this :
cards:
- show_name: true
show_icon: true
type: custom:button-card
entity: binary_sensor.garage_door_kiabmw
name: Garage
tap_action:
action: navigate
navigation_path: /dashboard-garage
state:
- value: 'on'
icon: mdi:garage-open-variant
styles:
icon:
- color: red
- value: 'off'
icon: mdi:garage-variant
styles:
icon:
- color: |
[[[
if (states['light.garage_light_all'].state == 'on')
return "orange";
else
return "green";
]]]