Change icon by state Lovelace

Configuration Frontend
1

EDIT Button Entity Row isn’t maintain anymore. I replaced it with Paper Buttons Row (via HACS)

Hi All!

Can’t imagine my question was not asked yet but i am unable to find the correct answer, so here it comes.

I currently have running Home Assistant 0.99.3 with a Xiaomi Gateway as (basic) Alarm.
Recently i have added ‘Button Entity Row’ to my project and ‘Clear Theme Dark’.

This gives me the option to give a custom card which can look like this:

image
image958×619 61.9 KB

On the page shown above there is a simple card above ‘Lampen’. Behind these buttons i can configure scene’s, script’s of switches (maybe even more).

What do i want to accomplish, the 3th button is a button to arm/disarm my alarm. This is working but what i am missing is that the button changes/shows the state of the alarm.

After some googling i found a thread advising me to create a custom sensor where i would change the icon state of the custom sensor following the state of the switch (if that makes sense)
code:

- platform: template
  sensors:
    alarm_status:
      value_template: '{{ states.switch.xiaomi_gateway_alarm.attributes.state_value}}'
      friendly_name: 'Alarm Status'
      icon_template: '{%- if is_state("switch.xiaomi_gateway_alarm", "on") %}mdi:shield-home{% else %}mdi:shield-home-outline{%- endif %}'

In the below screen also a view of the developer tools (filtered on my alarm)

image
image844×517 41.1 KB

Then there is the code i have for my Custom Card found in my RAW Config Editor:

  - badges: []
    cards:
      - buttons:
          - entity: scene.thuis
            icon: 'mdi:home'
            style:
              - color: white
          - entity: scene.tv_kijken
            icon: 'mdi:television'
            style:
              - color: white
          - entity: switch.xiaomi_gateway_alarm
            icon: 'mdi:shield-home'
            style:
              - color: white
          - entity: scene.slapen
            icon: 'mdi:brightness-3'
            style:
              - color: white
          - entity: scene.alloff
            icon: 'mdi:close-box'
            style:
              - color: white
        type: 'custom:button-entity-row'

for the entity ‘switch.xiaomi_gateway_alarm’ i tried the following for ‘icon:’ but all outputted just the code as plain text instead of the value.

          - entity: switch.xiaomi_gateway_alarm
            icon: '{{ states.sensor.alarm_status.attributes.icon}}'

          - entity: switch.xiaomi_gateway_alarm
            icon: "if (state === 'on') return 'mdi:shield-home'; else return 'mdi:shield-home-outline';"

          - entity: switch.xiaomi_gateway_alarm
            icon: >
		{% if is_state('switch.xiaomi_gateway_alarm','on') %} mdi:shield-home-
		{% else %} mdi:shield-home-outline
		% endif %}

I tried to explain as clearly as possible and hope it makes sense and there is an solution to it.
(Bonus would be to change the color)

2

Okey, now i really feel stupid. After posting i did a final read and tested the links.

After another quick scroll on the page i found the option ‘Using state icons’
where i found this option. Also directly answered my own bonus question on how to change the color, as it follow the style sheet. And after removing the color line in my own lovelace code this worked as well.

going to leave this thread as it is as it may help others.

For those who already were searching. Thanks!

        state_icons:
          "off": "mdi:shield-home-outline"
          "on": "mdi:shield-home"
11 Likes
3

That’s really handy. Should be standard in HA.

6 Likes
5

Does this only work for the custom button plugin?

6

Button Entity Row isn’t maintain anymore. I replaced it with Paper Buttons Row (via HACS)

7

Sorry for my “stupid” question. How can i install Paper Buttons Row i install HACS, but i don’t see the Paper Buttons Rows.
Thanks in advance
Paolo

8

Maybe you already figured it out but look under “Fronted” and then use the search bar:

image
image1301×406 22.2 KB

9

What do i want to accomplish, the 3th button is a button to arm/disarm my alarm. This is working but what i am missing is that the button changes/shows the state of the alarm.

After another quick scroll on the page i found the option ‘Using state icons ’
where i found this option. Also directly answered my own bonus question on how to change the color, as it follow the style sheet. And after removing the color line in my own lovelace code this worked as well.

@djansen1987 And how do you get this together with (only) this setup? I managed to get a custom icon in Paper Buttons Row , but not to exchange only the main entity icon in a standard entity row.

10

Hi Arganto,

not totaly sure what you mean, but i think this is it:

search for " Using state icons, state text and actions"

type: entities
entities:
  - type: "custom:paper-buttons-row"
    buttons:
      - entity: lock.front_door
        state_icons:
          "unlocked": "mdi:lock-open"
          "locked": "mdi:lock"
        state_text:
          "unlocked": "Unlocked"
          "locked": "Locked"

        state_styles:
          "unlocked":
            button:
              color: green
          "locked":
            button:
              color: red
        style:
          button:
            background-color: var(--table-row-alternative-background-color)
            border-radius: 40px
            padding: 10px
            font-size: 1.2rem

        tap_action:
          action: call-service
          service: lock.lock
          service_data:
            entity_id: lock.front_door

        hold_action:
          action: call-service
          service: lock.unlock
          service_data:
            entity_id: lock.front_door

          # it's also possible to add a confirmation dialog to the action.
          confirmation:
            exemptions:
              - user: 22a1119b08c54960822a0c6b896bed2
            text: Are you sure you want to unlock?

remember you need to create a custom card after installing this plugin via HACS

11

Yes, but then I have another row and a button. I only want to change the icon of an existing row dependig of the state. Exactly what you have written above:

What do i want to accomplish, the 3th button is a button to arm/disarm my alarm. This is working but what i am missing is that the button changes/shows the state of the alarm.

And then you have written, that you have seolved this. How did you do this in your example?

12

Hi Arganto,

Yes this can be acomplised by adding the folowing for a lock under the entiy in your paperbuttonrow yaml

        state_icons:
          "unlocked": "mdi:lock-open"
          "locked": "mdi:lock"

for a light

        state_icons:
          "on": "mdi:lock-open"
          "off": "mdi:lock"
13

I saw these parts of the example, but do not get the rest.

image

I want the same as you wrote in your example. Still the entity line, still the switch but only the icon changed depending on the status. Can you chow your complete example? Would be more than great.

14

HI Arganto,

It is not possible to have an entity with the paper button row to have it look like and entity card.
It will always be an button only. Not a switch/toggle kind of look as original.

I do not know if it is possible to change the icon on the normal entities cards. (could not find it in a quick search)

looks like:

image

in the example below they combined a normal entity and a paper row entity
image

15

I expected all this from the paper buttons row description, but because of this, the thread is very cunfusion, because your starting point was only to change the icon in your third row of your screenshot and not to add only a new button with changing icons. This is what I then reasked several times and you answered, yes possible, put this and that there. And now it is not possible as expected.

Ok. It is as it is. Will stay on config_template_card for this,

1 Like
16

Hi arganto,

Sorry you got my post wrong. It starts with the text i want to change the arm button icon in the top. I also refer to the custom card.

Good luck with your config

17

Folks,

I cannot add custom icon. The button ignores my state_icons: parameter. The only way how to change the icon is do it for the entity itself but the button does not react if I add it to the state_icons: row.

What else confuse me is that you use double quotation marks “on”. I edit my lovelace in raw yaml and after saving the double quotation marks are delete by HA

The code I write:

                  - type: 'custom:paper-buttons-row'
                    buttons:
                      - entity: binary_sensor.openclose_17
                        name: false
                        state_icons:
                          "closed": 'mdi:door-closed'
                          "open": 'mdi:door-open'
                        state_styles:
                          closed:
                            button:
                              color: white
                          open:
                            button:
                              color: yellow

The code after saving:

                  - type: 'custom:paper-buttons-row'
                    buttons:
                      - entity: binary_sensor.openclose_17
                        name: false
                        state_icons:
                          closed: 'mdi:door-closed'
                          open: 'mdi:door-open'
                        state_styles:
                          closed:
                            button:
                              color: white
                          open:
                            button:
                              color: yellow

However, I have to say that the state_styles: without double quotation works and changes to color with doors open

18

Guys,

I found this wonderful repo to extend the possibilities of a button in lovelace. I really like it.
Does anyone know to show a status of a sensor combined with an icon of a switch?

Any idea is appreciated
Thanks
Vic

19

I think that the best way how to do it is to focus button card. It allows you to show more than a state of one entity on one button

20

Thanks for the hint.

21

hi. Can someone even help with changing an image with the sensors cause midi and hass icons are not enough. This is the code that i tried to go through but no results…

type: picture-entity
entity:
image: local
name: front door
show_state: true
state_image:
closed: local
open: local\