Conditional Icons

[Derek Kaser]

Is your feature request related to a problem? Please describe.
I would like to be able to change the icon of a button based on a condition (what I'm currently trying to do is switch my mute button based on the state of is_volume_muted).

Describe the solution you'd like
Add configuration options to select an icon based on a connected state.

[Nick Bolles]

crazy timing, I just came here to ask the same question about volume mute. It'd be nice if the built in volume_mute button changed to mdi:volume-mute when it's muted.

I also tried using a template for the icon but got a syntax error:

custom_keys:
  custom_volume:
    icon: {{ iif(state_attr('media_player.bedroom_tv_2', 'volume_level') == 0,'mdi:volume-off', 'mdi:volume') }}
    key: volume_mute

This returns mdi:volume in the template tester in HASS developer tools, but throws this configuration error in the card configuration:

missed comma between flow collection entries (9:72)

  6 |  ... 
  7 |  ... 
  8 |  ... 
  9 |  ... .bedroom_tv_2', 'volume_level') == 0,'mdi:volume-off', 'mdi:v ...
-----------------------------------------^
 10 |  ... 
 11 |  ... 

[Nick Bolles]

Oh, I think this is also a dupe of this issue: #34

[Nerwyn]

I've added template support to one of my other projects and plan to start work on adding it to this one once I'm done with a minor refactor on the other project.

[Nerwyn]

Template support added in v3.1.0. See the release page linked above for an example of how it's used to change the icon based on an entity state.

[78wesley]

crazy timing, I just came here to ask the same question about volume mute. It'd be nice if the built in volume_mute button changed to mdi:volume-mute when it's muted.

I also tried using a template for the icon but got a syntax error:

custom_keys:
  custom_volume:
    icon: {{ iif(state_attr('media_player.bedroom_tv_2', 'volume_level') == 0,'mdi:volume-off', 'mdi:volume') }}
    key: volume_mute

This returns mdi:volume in the template tester in HASS developer tools, but throws this configuration error in the card configuration:

missed comma between flow collection entries (9:72)

  6 |  ... 
  7 |  ... 
  8 |  ... 
  9 |  ... .bedroom_tv_2', 'volume_level') == 0,'mdi:volume-off', 'mdi:v ...
-----------------------------------------^
 10 |  ... 
 11 |  ... 

I did this to make it like that.

volume_mute:
    icon: >-
      {{ iif(state_attr('media_player.wesley_tv', 'is_volume_muted'),
      'mdi:volume-off', 'mdi:volume-high') }}