Custom button card with custom fields can't use states for icon

Configuration Frontend
1

I’m trying to create a custom button card. I use the grid configuration. I got almost where I wanted to be (will turn this into a template card once i’m done) but one thing doesn’t seems to work.

I have Custom fields in my card, (a button card but actualy I use it just for the icon left botton
card-mod-icon-color

I managed to change the color of the icon (bottom left, the toggle switch icon)

But I can’t use a {% if is_state on the card-mod-icon-color. to change the color according to the ste of the light.living entity.

Am I doing something wrong? what {% if is_state info should work here on this level?

full code of the button card (to be cleaned up)
name of the custom field ( bottom left) is “slider”

type: custom:button-card
show_state: true
styles:
  card:
    - background-color: '#7780cd'
    - box-shadow: none
    - width: 150px
    - height: 150px
    - border-radius: 20%
  img_cell:
    - background-color: rgb(72, 82, 100)
    - border-radius: 100%
    - width: 40px
    - height: 40px
    - background-color: '#6773cf'
  icon:
    - width: 25px
    - height: 25px
  name:
    - color: white
    - font-size: 1em
    - height: 50px
    - margin: 10px 0 0 0
  custom_fields:
    slider:
      - padding: 0
      - width: 100%
      - height: 25px
      - width: 75px
  label: null
  grid:
    - grid-template-areas: '" i s " " n a " " slider slider"'
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr
state:
  - value: 'off'
    styles:
      icon:
        - color: white
  - value: 'on'
    styles:
      icon:
        - color: white
  - value: unavailable
    styles:
      icon:
        - color: red
custom_fields:
  slider:
    card:
      show_name: false
      show_icon: true
      type: button
      tap_action:
        action: toggle
      entity: light.living
      icon: mdi:toggle-switch-outline
      style: |
        ha-card {
          background-color:transparent;
          box-shadow: none;
                 }

        :host {
          --card-mod-icon-color: white;
              }

entity: light.spotjes
name: spotjes
icon: mdi:lightbulb-outline
2

To change the color of the icon in a custom button card based on the state of an entity, you can use the {% if is_state() %} template tag in the icon section of the card definition. The is_state() function takes two arguments: the entity ID and the desired state.

For example, to change the color of the icon to green when the light.living entity is on, and to red when it is off, you could use the following code:

type: custom:button-card
show_state: true
styles:
  card:
    - background-color: '#7780cd'
    - box-shadow: none
    - width: 150px
    - height: 150px
    - border-radius: 20%
  img_cell:
    - background-color: rgb(72, 82, 100)
    - border-radius: 100%
    - width: 40px
    - height: 40px
    - background-color: '#6773cf'
  icon:
    - width: 25px
    - height: 25px
    {% if is_state("light.living", "on") %}
    - color: green
    {% else %}
    - color: red
    {% endif %}
  name:
    - color: white
    - font-size: 1em
    - height: 50px
    - margin: 10px 0 0 0
  custom_fields:
    slider:
      card:
        show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.living
        icon: mdi:toggle-switch-outline
        style: |
          ha-card {
            background-color:transparent;
            box-shadow: none;
          }

          :host {
            --card-mod-icon-color: white;
          }

This code will change the color of the icon to green when the light.living entity is on, and to red when it is off. You can adjust the colors and entity ID as needed for your specific use case.

It’s also worth noting that the {% if is_state() %} template tag only works at the top level of the card definition. It cannot be used inside the custom_fields section of the card, as you are trying to do in your code. To change the color of the icon based on the state of an entity, you will need to use the {% if is_state() %} template tag inside the icon section of the card.

3

oh, so it’s not possible then?
Because I don’t want to change the icon of the custom button card (the one on the top left) but the custom_fields icon on the bottom left. so this is not possible then?

any other way to add (some) extra icons inside a custom button card that can change with the {% if is_state} ?

thank you for your help @bastero !

4

So I figured it out. Instead of embedding another card as Custom fields, I just added a field called “second” like in the example of sensor.raspi_temp in GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant and instead of adding info in the “style” part, I added this to the custom fields part:

custom_fields:
  second: |
    [[[
        if (states['light.spotjes'].state == 'on')
          return `<ha-icon
    icon="mdi:toggle-switch"
    style="width: 40px; height: 40px; color: white; ">
    </ha-icon>`
        return `<ha-icon
    icon="mdi:toggle-switch-off"
    style="width: 40px; height: 40px; color: white;">
    </ha-icon>`;
      ]]]

card looks like this when on:
on

and when off:

off

(still have to fine tune the design and turn it into templates, but I finaly figured out how to ad icons that you can change by state.)

2 Likes
5

for info here 's the whole card’s code:

type: custom:button-card
show_state: true
styles:
  card:
    - background-color: '#7780cd'
    - box-shadow: none
    - width: 150px
    - height: 150px
    - border-radius: 20%
  img_cell:
    - background-color: rgb(72, 82, 100)
    - border-radius: 100%
    - width: 40px
    - height: 40px
    - background-color: '#6773cf'
  icon:
    - width: 25px
    - height: 25px
  name:
    - color: white
    - font-size: 1em
    - height: 30px
    - width: 100%
    - text-align: left
    - margin: 20px 0 0 35px
  state:
    - color: white
  custom_fields:
    second:
      - position: absolute
      - left: 5%
      - top: 70%
      - height: 60px
      - width: 60px
      - font-size: 20px
      - line-height: 20px
  label: test
  grid:
    - grid-template-areas: '" i s " " n n " " notification notification"'
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr
state:
  - value: 'off'
    styles:
      icon:
        - color: '#7780cd'
      img_cell:
        - background-color: '#6773cf'
  - value: 'on'
    styles:
      icon:
        - color: white
  - value: unavailable
    styles:
      icon:
        - color: red
custom_fields:
  second: |
    [[[
        if (states['light.spotjes'].state == 'on')
          return `<ha-icon
    icon="mdi:toggle-switch"
    style="width: 40px; height: 40px; color: white; ">
    </ha-icon>`
        return `<ha-icon
    icon="mdi:toggle-switch-off"
    style="width: 40px; height: 40px; color: white;">
    </ha-icon>`;
      ]]]
entity: light.spotjes
name: spotjes
icon: mdi:lightbulb-outline
2 Likes