How to change icon and color icon depending from state

Hello,
I’m trying to build this portion of card code in order to change icon and color icon in case my modem is connect or disconnect from internet:

- type: custom:button-card
                  layout: icon_name_state2nd
                  show_icon: true
                  show_state: true
                  styles:
                    grid:
                      - grid-template-columns: 50px auto
                    icon:
                      - padding: 0px 0px
                      - height: 30px
                      - width: 30px
                    card:
                      - '--ha-card-background': rgba(0, 0, 0, 0.0)
                      - '--ha-card-box-shadow': none
                      - '--ha-card-border-width': 0px
                    state:
                      - padding: 0px 0px
                      - justify-self: start
                      - font-family: Roboto, sans-serif
                      - font-size: 15px
                    name:
                      - padding: 0px 0px
                      - justify-self: start
                      - color: var(--secondary-text-color)
                      - font-size: 16px
                  entity: binary_sensor.dsl_ax82u_internet
                  name: Internet
                  icon: mdi:check-network

if the internet status is ‘Connected’ I’d want the icon in green and the mdi icon that signs the connection.
If the internet status is disconnected the icon should be red and change to an mdi icon of disconnected network.

Is it possible to implement in my code?

Try this and change the values to your needs

state:
 - value: ‘Connected'
   color: '#000000'
   icon: mdi:youricon

Place it at the same tab position of show_state

For the icon color you could use something like this but adapted to you sensor.


icon:
      - width: 50px
      - height: 50px
      - color: >
          [[[
            if (states['sensor.lights_on_total'].state == ‘Connected’ )
              return 'green';
            return 'red';
          ]]]

The solution for the color icon gives me the error:

missed comma between flow collection entries

While the first one didn’t work at all.

EDIT:

I fixed both including this condition, where state is at the same level of show_state:

state:
                    - value: 'on'
                      color: '#a3e50e'
                      icon: mdi:check-network
                    - value: 'off'
                      color: '#ff1100'
                      icon: mdi:close-network

There are a few ways to accomplish changing the icon and color.

Test this out…

type: custom:button-card
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
  grid:
    - grid-template-columns: 50px auto
  icon:
    - padding: 0px 0px
    - height: 30px
    - width: 30px
    - color: |
        [[[ return entity.state === 'on' ? 'green' : 'red';
        ]]]
  card:
    - '--ha-card-background': rgba(0, 0, 0, 0.0)
    - '--ha-card-box-shadow': none
    - '--ha-card-border-width': 0px
  state:
    - padding: 0px 0px
    - justify-self: start
    - font-family: Roboto, sans-serif
    - font-size: 15px
  name:
    - padding: 0px 0px
    - justify-self: start
    - color: var(--secondary-text-color)
    - font-size: 16px
entity: binary_sensor.dsl_ax82u_internet
name: Internet
icon: |
  [[[ return entity.state === 'on' ? 'mdi:check-network' : 'mdi:close-network';
   ]]]
1 Like