Change icon colour in entity on custom card, nothing i try works

Configuration Frontend
1

I have the following card yaml, using card mod and multiple entity row.

I want the icons to change colour depending on the state of the attributes.

type: entities
entities:
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Fan
    toggle: true
    entities:
      - entity: sensor.lounge_fan_temperature
        name: Temperature
      - attribute: percentage
        name: Speed
        unit: '%'
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Speed
    attribute: percentage
    show_state: false
    unit: '%'
    icon: mdi:fan-plus
    entities:
      - icon: mdi:fan-speed-1
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 25
      - icon: mdi:fan-speed-2
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 50
      - icon: mdi:fan-speed-3
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 75
      - icon: mdi:fan-plus
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 100
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Swing
    attribute: oscillating
    icon: mdi:rotate-3d-variant
    show_state: false

    entities:
      - attribute: oscillating
        name: Swing

      - icon: mdi:bullseye
        name: 'OFF'

        tap_action:
          action: call-service
          service: fan.oscillate
          service_data:
            entity_id: fan.lounge_fan
            oscillating: false
      - icon: mdi:rotate-3d-variant
        name: 'ON'
        tap_action:
          action: call-service
          service: fan.oscillate
          service_data:
            entity_id: fan.lounge_fan
            oscillating: true
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Mode
    attribute: preset_mode
    icon: mdi:cog-pause
    entities:
      - icon: mdi:tailwind
        name: Normal
        tap_action:
          action: call-service
          service: fan.set_preset_mode
          service_data:
            entity_id: fan.lounge_fan
            preset_mode: normal
      - icon: mdi:forest
        name: Nature
        tap_action:
          action: call-service
          service: fan.set_preset_mode
          service_data:
            entity_id: fan.lounge_fan
            preset_mode: nature
      - icon: mdi:sleep
        name: Sleep
        tap_action:
          action: call-service
          service: fan.set_preset_mode
          service_data:
            entity_id: fan.lounge_fan
            preset_mode: sleep
title: Fan
show_header_toggle: false
state_color: true

how can i change the icons colour depending on what the state of the attribute is.
I want to change the icon that you touch to change the speed and swing settings. Not the one to the left of the card.
The ones on the right side of the card.

Ive tried everything and cant figure it out.

image
image734×638 22.3 KB

2

The 1st post of card_mod topic → post with links to styles → post about multiple-entity-row → your required code

3

Thank you so much. i never would have guessed that

My code

type: entities
entities:
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Fan
    toggle: true
    state_color: true
    entities:
      - entity: sensor.lounge_fan_temperature
        name: Temperature
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Speed
    attribute: percentage
    show_state: false
    unit: '%'
    icon: mdi:fan-plus
    state_color: true
    style:
      hui-generic-entity-row:
        $: ''
        .: |
          div.entity:nth-child(1) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'percentage', 25) %} var(--primary-color) {% endif %};
          }
          div.entity:nth-child(2) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'percentage', 50) %} var(--primary-color) {% endif %};
          }
          div.entity:nth-child(3) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'percentage', 75) %} var(--primary-color) {% endif %};
          }
          div.entity:nth-child(4) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'percentage', 100) %} var(--primary-color) {% endif %};
          }
    entities:
      - icon: mdi:fan-speed-1
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 25
      - icon: mdi:fan-speed-2
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 50
      - icon: mdi:fan-speed-3
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 75
      - icon: mdi:fan-plus
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.lounge_fan
            percentage: 100
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Swing
    attribute: oscillating
    icon: mdi:rotate-3d-variant
    show_state: false
    state_color: true
    style:
      hui-generic-entity-row:
        $: ''
        .: |
          div.entity:nth-child(1) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'oscillating', false) %} var(--primary-color) {% endif %};
          }
          div.entity:nth-child(2) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'oscillating', true) %} var(--primary-color) {% endif %};
          }
    entities:
      - icon: mdi:bullseye
        name: 'OFF'
        tap_action:
          action: call-service
          service: fan.oscillate
          service_data:
            entity_id: fan.lounge_fan
            oscillating: false
      - icon: mdi:rotate-3d-variant
        name: 'ON'
        tap_action:
          action: call-service
          service: fan.oscillate
          service_data:
            entity_id: fan.lounge_fan
            oscillating: true
  - entity: fan.lounge_fan
    type: custom:multiple-entity-row
    name: Mode
    attribute: preset_mode
    icon: mdi:cog-pause
    show_state: false
    state_color: true
    style:
      hui-generic-entity-row:
        $: ''
        .: |
          div.entity:nth-child(1) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'preset_mode', 'normal') %} var(--primary-color) {% endif %};
          }
          div.entity:nth-child(2) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'preset_mode', 'nature') %} var(--primary-color) {% endif %};
          }
          div.entity:nth-child(3) state-badge {
            color: {% if is_state_attr('fan.lounge_fan', 'preset_mode', 'sleep') %} var(--primary-color) {% endif %};
          }
    entities:
      - icon: mdi:tailwind
        name: Normal
        tap_action:
          action: call-service
          service: fan.set_preset_mode
          service_data:
            entity_id: fan.lounge_fan
            preset_mode: normal
      - icon: mdi:forest
        name: Nature
        tap_action:
          action: call-service
          service: fan.set_preset_mode
          service_data:
            entity_id: fan.lounge_fan
            preset_mode: nature
      - icon: mdi:sleep
        name: Sleep
        tap_action:
          action: call-service
          service: fan.set_preset_mode
          service_data:
            entity_id: fan.lounge_fan
            preset_mode: sleep
title: Fan
show_header_toggle: false
state_color: true

And the Image

image
image851×535 17.5 KB

4

Alternatively - use a stock “styles::color: something” option and place the whole row inside config-template-card.