Icon not show on mobile app if horseshow are in conditional card

[andbad]

Home Assistant: 2023.9.3
Frontend: 20230911.0
Home Assistant Mobile App: 2023.4

I created a condition card with the horseshow card nested.
In the mobile app the icon is not displayed, however in the desktop browser it works correctly.

Ex.
The card is not working properly (the icon does not appear in the mobile app):

conditions:
  - entity: binary_sensor.pdc_visibile
    state: 'on'
card:
  type: custom:flex-horseshoe-card
  entities:
    - entity: sensor.potenza_pdc
      decimals: 0
      name: ' '
      area: Esterno
      unit: W
      tap_action:
        action: more-info
    - entity: switch.pdc_interruttore_raw
      name: PdC
      icon: hass:water-boiler
      tap_action:
        action: call-service
        service: switch.toggle
        service_data:
          entity_id: switch.pdc_interruttore_raw
    - entity: group.ts
      name: info
      icon: hass:information-outline
      tap_action:
        action: more-info
  animations:
    entity.1:
      - state: 'on'
        circles:
          - animation_id: 11
            styles:
              - fill: var(--light-primary-color);
              - animation: jello 1s ease-in-out both;
              - transform-origin: center;
        icons:
          - animation_id: 0
            styles:
              - color: var(--secondary-background-color);
      - state: 'off'
        circles:
          - animation_id: 11
            reuse: true
            styles:
              - transform-origin: center;
              - animation: zoomOut 1s ease-out both;
        icons:
          - animation_id: 0
            styles:
              - color: var(--light-primary-color);
  show:
    horseshoe_style: lineargradient
  layout:
    states:
      - id: 0
        entity_index: 0
        xpos: 50
        ypos: 28
        uom_font_size: 1.5
        styles:
          - font-size: 2.5em;
          - opacity: 1.0;
    names:
      - id: 0
        entity_index: 0
        xpos: 50
        ypos: 100
        styles:
          - font-size: 1.2em;
          - opacity: 0.7;
      - id: 1
        entity_index: 1
        xpos: 50
        ypos: 95
        styles:
          - font-size: 1.6em;
          - opacity: 0.8;
    icons:
      - id: 0
        animation_id: 0
        xpos: 50
        ypos: 55
        entity_index: 1
        icon_size: 3.5
      - id: 1
        animation_id: 1
        xpos: 92
        ypos: 12
        entity_index: 2
        icon_size: 3
        styles:
          - color: var(--secondary-background-color);
    circles:
      - id: 0
        animation_id: 0
        xpos: 50
        ypos: 50
        radius: 35
        styles:
          - fill: var(--secondary-background-color);
      - id: 1
        animation_id: 11
        xpos: 50
        ypos: 50
        radius: 30
        entity_index: 1
  horseshoe_scale:
    min: 0
    max: 3000
    color: var(--secondary-background-color)
  color_stops:
    '0': var(--primary-background-color)
    '3000': var(--light-primary-color)
  horseshoe_state:
    width: 12

The card works correctly (icon also visible in the mobile app):

type: custom:flex-horseshoe-card
entities:
  - entity: sensor.potenza_totale_luci
    decimals: 0
    name: ' '
    area: Esterno
    unit: W
    tap_action:
      action: more-info
  - entity: light.tutte_le_luci
    name: Luci
    icon: hass:lightbulb
    tap_action:
      action: call-service
      service: light.toggle
      service_data:
        entity_id: light.tutte_le_luci
  - entity: group.ts
    name: info
    icon: hass:information-outline
    tap_action:
      action: more-info
animations:
  entity.1:
    - state: 'on'
      circles:
        - animation_id: 11
          styles:
            - fill: var(--light-primary-color);
            - animation: jello 1s ease-in-out both;
            - transform-origin: center;
      icons:
        - animation_id: 0
          styles:
            - color: var(--secondary-background-color);
    - state: 'off'
      circles:
        - animation_id: 11
          reuse: true
          styles:
            - transform-origin: center;
            - animation: zoomOut 1s ease-out both;
      icons:
        - animation_id: 0
          styles:
            - color: var(--light-primary-color);
show:
  horseshoe_style: lineargradient
layout:
  states:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 28
      uom_font_size: 1.5
      styles:
        - font-size: 2.5em;
        - opacity: 1.0;
  names:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 100
      styles:
        - font-size: 1.2em;
        - opacity: 0.7;
    - id: 1
      entity_index: 1
      xpos: 50
      ypos: 95
      styles:
        - font-size: 1.6em;
        - opacity: 0.8;
  icons:
    - id: 0
      animation_id: 0
      xpos: 50
      ypos: 55
      entity_index: 1
      icon_size: 3.5
    - id: 1
      animation_id: 1
      xpos: 92
      ypos: 12
      entity_index: 2
      icon_size: 3
      styles:
        - color: var(--secondary-background-color);
  circles:
    - id: 0
      animation_id: 0
      xpos: 50
      ypos: 50
      radius: 35
      styles:
        - fill: var(--secondary-background-color);
    - id: 1
      animation_id: 11
      xpos: 50
      ypos: 50
      radius: 30
      entity_index: 1
horseshoe_scale:
  min: 0
  max: 1500
  color: var(--secondary-background-color)
color_stops:
  '0': var(--primary-background-color)
  '1500': var(--light-primary-color)
horseshoe_state:
  width: 12

SX: icon not visible - DX: icon visibile

[eddysteurs]

I have the same problem when adding a restrictrions card
When I remove the 5 first lines the icons show on my iphone app

type: custom:restriction-card
restrictions:
pin:
code: 1234
card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.droogkast_socket_1_power
attribute: power
name: Droogkast ori
decimals: 1
unit: W
area: Berging
tap_action:
action: more-info
- entity: switch.droogkast_socket_1
attribute: null
icon: mdi:tumble-dryer
decimals: 0
unit: ''
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.droogkast_socket_1
- entity: climate.thermostaat
attribute: temperature
icon: null
decimals: 0
unit: null
tap_action:
action: more-info
show:
horseshoe_style: lineargradiant
animations:
entity.1:
- state: 'on'
circles:
- animation_id: 11
styles:
- fill: lightgreen;
- opacity: 0.5;
- transform-origin: center;
- animation: jello 1s ease-in-out both;
icons:
- animation_id: 10
styles:
- fill: orange;
- state: 'off'
circles:
- animation_id: 11
styles:
- fill: lightblue;
- transform-origin: 50% 60%;
icons:
- animation_id: 20
styles:
- fill: lightblue;
layout:
states:
- id: 0
entity_index: 0
animation_id: 0
xpos: 50
ypos: 28
uom_font_size: 1.5
styles:
- font-size: 2.5em;
- opacity: 0.9;
names:
- id: 0
animation_id: 0
entity_index: 0
xpos: 50
ypos: 90
styles:
- font-size: 1.2em;
- opacity: 0.7;
icons:
- id: 0
animation_id: 10
xpos: 50
ypos: 55
entity_index: 1
icon_size: 3.5
styles:
- color: lightgreen;
- id: 0,
animation_id: 20
xpos: 70
ypos: 55
entity_index: 2
icon_size: 0.5
styles:
- color: lightblue;
circles:
- animation_id: 3
xpos: 50
ypos: 50
radius: 45
entity_index: 1
styles:
- fill: var(--primary-background-color);
- animation_id: 11
xpos: 50
ypos: 50
radius: 40
entity_index: 1
styles:
- fill: orange;
- animation_id: 2
xpos: 50
ypos: 50
radius: 25
entity_index: 1
styles:
- fill: var(--primary-background-color);
horseshoe_scale:
min: 0
max: 4000
color_stops:
'100': lightgreen
'200': green
'500': yellow
'750': orange
'2000': red

[falkio8]

I cant get any icons to work on iOS (mobile). Even if I take the examples provided in the github and place them in an empty masonry view. I tried to strip them as much as possible and tried different entities but no luck at all.