Problems changing icon color in 'custom:flex-horseshoe-card'

Configuration Frontend
1

Hi,

I’ve been using the ‘custom:flex-horseshoe-card’ to create a card for Transmission.
Everything works great except for the icon. It doesn’t change color when you click on it.
It does change the turtle mode state, but it stays white.

I’ve checked the --primary-color var in my theme, and it’s not set to white :slight_smile:

Any idea what i’m doing wrong?

type: 'custom:flex-horseshoe-card'
entities:
  - entity: sensor.transmission_down_speed
    name: Download
    unit: MB/s
    area: Transmission
    tap_action:
      action: more-info
  - entity: sensor.transmission_active_torrents
    name: Active
    tap_action:
      action: more-info
  - entity: sensor.transmission_completed_torrents
    name: Complete
    tap_action:
      action: more-info
  - entity: sensor.transmission_status
    name: Status
    tap_action:
      action: more-info
  - entity: switch.transmission_turtle_mode
    icon: 'mdi:turtle'
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.transmission_turtle_mode
card_filter: card--dropshadow-heavy
animations:
  entity.4:
    - state: 'on'
      icons:
        - animation_id: 0
          styles:
            - fill: var(--primary-color);
    - state: 'off'
      icons:
        - animation_id: 0
          styles:
            - fill: white;
show:
  scale_tickmarks: true
  horseshoe_style: fixed
layout:
  hlines:
    - id: 0
      xpos: 50
      ypos: 45
      length: 50
      styles:
        - stroke: var(--primary-text-color);
        - stroke-width: 1;
        - opacity: 0.9;
        - stroke-linecap: round;
  states:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 28
      styles:
        - font-size: 2em;
    - id: 1
      entity_index: 1
      xpos: 30
      ypos: 62
      styles:
        - font-size: 1em;
    - id: 2
      entity_index: 2
      xpos: 70
      ypos: 62
      styles:
        - font-size: 1em;
    - id: 3
      entity_index: 3
      xpos: 50
      ypos: 77
      styles:
        - font-size: 1em;
  names:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 40
      styles:
        - font-size: 2em;
    - id: 1
      entity_index: 1
      xpos: 30
      ypos: 55
      styles:
        - font-size: 1em;
    - id: 2
      entity_index: 2
      xpos: 70
      ypos: 55
      styles:
        - font-size: 1em;
    - id: 3
      entity_index: 3
      xpos: 50
      ypos: 70
      styles:
        - font-size: 1em;
  icons:
    - id: 0
      entity_index: 4
      xpos: 10
      ypos: 10
  areas:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 97
      styles:
        - color: var(--primary-color);
        - font-size: 2em;
        - opacity: 0.8;
horseshoe_scale:
  min: 0
  max: 1.5
  width: 5
horseshoe_state:
  width: 7
color_stops:
  '100': red
  '500': yellow
  '1000': green
2

A while ago now, but I had the same problem. Try

icons:
  - animation_id: 0
    styles:
      - color: white;

It’s working in browser, but not in the Android HA app. I would be appreciate any help…

3

I’m having same problem, can’t change icon colors also with the example with light buttons! Maybe some breaking changes in a recent update? Pity, this card is beautiful!