Icons not appearing when opened by shortcut

[ukmgranger]

When opening the remote card using a shortcut created in the companion app, some images do not appear.

[Nerwyn]

Do not delete the issue template, it exists for a reason. I don't know where these button images are saved, what exactly this shortcut is opening, or what your card config is.

[ukmgranger]

My bad - on mobile and wanted to get it down.

Checklist:

• [x ] I updated to the latest version available
• [x ] I cleared the cache of my browser
• [x ] I have confirmed that this is an issue with this project and not an integration by making the same actions with the actions dev tool

Release with the issue: 2024.11.0b1 Last working release (if known): Na - I have never tried accessing the remote card via a shortcut before. Browser and Operating System: Android 15 (Pixel 6 pro) - using the companion app

Description of problem: When opening the remote card (this is a subview in my HA dashboard) using a shortcut created in the companion app, some images do not appear. See screenshots in above post - The buttons seem to exist as I have tried adding a label to the top row of actions. The label appears, but not the icons.

Javascript errors shown in the web inspector (if applicable):

Your Full Remote Config

type: custom:android-tv-card
media_player_id: media_player.kitchentv
platform: Samsung TV
rows:
  - - power
    - home
    - Lighting
  - - - LabelTV
  - - BBC1
    - BBC2
    - itv
    - channel4
    - channel5
    - TVGuide
  - - channel_up
    - channel_down
  - - null
  - - NetflixNew
    - Prime
    - Disney
    - Chromecast
  - - iPlayer
    - ITV X
    - All4
    - My5
  - - null
  - - rewind
    - null
    - play
    - null
    - pause
    - null
    - fast_forward
  - - rayvolume
  - - touchpad
    - - back
      - home
  - - n1
    - n2
    - n3
    - n4
    - n5
  - - n6
    - n7
    - n8
    - n9
    - n0
  - - null
  - - Ray Speach
    - Ray Night Sound
custom_actions:
  - type: button
    name: Disney
    autofill_entity_id: true
    icon: phu:disney-plus-alt
    entity_id: media_player.kitchentv
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: Disney
    styles: |-
      :host {
        --icon-color: rgb(17, 60, 207);
      }
    label: Disney
  - type: button
    name: Prime
    autofill_entity_id: true
    icon: phu:prime-video-alt
    entity_id: media_player.kitchentv
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: Prime Video
    styles: |
      .icon {
       --icon-color: #1894f6;
      }
    label: Prime
  - type: button
    name: NetflixNew
    autofill_entity_id: true
    icon: phu:netflix-alt
    entity_id: NetflixNew
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: Netflix
    styles: |
      .icon {
       --icon-color: #E50914;
      }
    label: Netflix
  - type: button
    name: All4
    autofill_entity_id: true
    icon: phu:channel-4-uk
    entity_id: media_player.kitchentv
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: All 4
    label: Channel 4
    styles: |
      .icon {
       --icon-color: #aaff89;
      }
  - type: button
    name: ITV X
    autofill_entity_id: true
    icon: phu:itvx
    entity_id: media_player.kitchentv
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: ITV X
    label: ITVX
    styles: |+
      .icon {
       --icon-color: #deeb52;
      }

  - type: button
    name: My5
    autofill_entity_id: true
    icon: mdi:numeric-5-box
    entity_id: media_player.kitchentv
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: My 5
    label: My 5
    styles: |
      .icon {
       --icon-color: #fed141;
      }
  - type: button
    name: Chromecast
    autofill_entity_id: true
    icon: phu:chromecast-alt
    entity_id: media_player.kitchentv
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: HDMI
    label: "Chromecast "
  - type: button
    name: iPlayer
    autofill_entity_id: true
    icon: iplayer
    entity_id: media_player.kitchentv
    tap_action:
      action: perform-action
      perform_action: media_player.select_source
      target:
        entity_id: media_player.kitchentv
      data:
        source: BBC iPlayer
    value_attribute: friendly_name
    label: iPlayer
    styles: |-
      .icon {
      background: linear-gradient(to bottom, #e72c83 0%, #a742c6 100%);
        --icon-color: white;
        border-radius: 8px;
      }
  - type: button
    name: power
    tap_action:
      action: perform-action
      perform_action: media_player.toggle
      target:
        entity_id:
          - media_player.kitchentv
    autofill_entity_id: false
    icon: mdi:power
    entity_id: media_player.kitchentv
  - type: button
    name: TVGuide
    tap_action:
      action: key
      key: KEY_GUIDE
      remote_id: remote.kitchentv
    autofill_entity_id: false
    icon: mdi:television-guide
    value_attribute: supported_features
    entity_id: media_player.kitchentv
  - type: button
    name: Lighting
    autofill_entity_id: true
    icon: mdi:ceiling-light-multiple-outline
    value_attribute: entity_id
    entity_id: scene.kitchen_tv
    tap_action:
      action: perform-action
      perform_action: scene.turn_on
      target:
        entity_id: scene.kitchen_tv
      data:
        transition: 3
    label: TV Lighting
  - type: button
    name: BBC1
    entity_id: media_player.kitchentv
    icon: mdi:numeric-1-circle
    tap_action:
      action: perform-action
      perform_action: media_player.play_media
      target:
        entity_id: media_player.kitchentv
      data:
        media_content_type: channel
        media_content_id: "101"
  - type: button
    name: BBC2
    entity_id: media_player.kitchentv
    icon: mdi:numeric-2-circle
    tap_action:
      action: perform-action
      perform_action: media_player.play_media
      target:
        entity_id: media_player.kitchentv
      data:
        media_content_type: channel
        media_content_id: "102"
  - type: button
    name: itv
    entity_id: media_player.kitchentv
    icon: mdi:numeric-3-circle
    tap_action:
      action: perform-action
      perform_action: media_player.play_media
      target:
        entity_id: media_player.kitchentv
      data:
        media_content_type: channel
        media_content_id: "103"
  - type: button
    name: channel5
    entity_id: media_player.kitchentv
    icon: mdi:numeric-5-circle
    tap_action:
      action: perform-action
      perform_action: media_player.play_media
      target:
        entity_id: media_player.kitchentv
      data:
        media_content_type: channel
        media_content_id: "105"
  - type: button
    name: channel4
    entity_id: media_player.kitchentv
    icon: mdi:numeric-4-circle
    tap_action:
      action: perform-action
      perform_action: media_player.play_media
      target:
        entity_id: media_player.kitchentv
      data:
        media_content_type: channel
        media_content_id: "104"
  - type: slider
    name: rayvolume
    range:
      - 0
      - 1
    step: 0.01
    value_attribute: volume_level
    tap_action:
      action: perform-action
      perform_action: media_player.volume_set
      data:
        volume_level: "{{ value | float }}"
    autofill_entity_id: true
    entity_id: media_player.kitchen_ray
    icon: mdi:volume-high
  - type: button
    name: LabelTV
    label: TV Channels
    styles: |-
      .label {
              font-size: 16px;
              font-weight: 500;
              font-family: roboto;
              text-transform: uppercase;
            }
    icon: ""
    entity_id: media_player.kitchentv
  - type: button
    name: Ray Speach
    entity_id: switch.kitchen_ray_speech_enhancement
    icon: mdi:ear-hearing
    tap_action:
      action: toggle
      target:
        entity_id: switch.kitchen_ray_speech_enhancement
    styles: |-
      .icon {

          {% if is_state('switch.kitchen_ray_speech_enhancement', 'on') %}
          color: orange;
          {% else %}
          color: white;
          {% endif %}
    label: Speach Enhance
  - type: button
    name: Ray Night Sound
    entity_id: switch.kitchen_ray_night_sound
    icon: mdi:chat-sleep
    tap_action:
      action: toggle
      target:
        entity_id: switch.kitchen_ray_night_sound
    styles: |-
      .icon {

          {% if is_state('switch.kitchen_ray_night_sound', 'on') %}
          color: orange;
          {% else %}
          color: white;
          {% endif %}
    label: Night Sound
autofill_entity_id: false
custom_icons:
  - name: iplayer
    path: >-
      M 11.6959 4 L 19.1646 8.31205 L 17.1882 11.7352 L 9.71956 7.42315 L
      11.6959 4 Z M 8.95272 7.65093 H 5 V 16.275 H 8.95272 V 7.65093 Z M 19.1646
      15.6879 L 17.1882 12.2648 L 9.71956 16.5768 L 11.6959 20 L 19.1646 15.6879
      Z
  - name: BBC1
remote_id: remote.kitchentv
styles: |-
  #row-8, #row-5, #row-14 {
    justify-content: center;
    height: 20px;
  }
  #row-9 {
    justify-content: center;
    padding-bottom: 10px;

  }
  #row-3 {
    border-radius: 8px 8px 0px 0px;
    background: #1d1e24;
    padding-top: 15px;
    }
  #row-4 {
    border-radius: 0px 0px 8px 8px;
    background: #1d1e24;
    padding-bottom: 15px; 
    }

Additional information:

[ukmgranger]

Looking into it now I'm at a computer - it looks like it's something to do with the Custom Brand Icons I use. Not sure where the issue lies though?? PHU - Custom Brand Icons

[Nerwyn]

If you're using a custom icon add-on, it's probably a Home Assistant custom frontend add-on load order issue and not exclusive to app shortcuts. It's loading and rendering the remote card before the custom icons are available. There isn't anything I can do about that.

It does look like the custom icons are partially available and loading though. Is it the same icons not rendering every time?

[ukmgranger]

Yeah - always the PHU icons. The card works absolutely fine if I just open the companion app and navigate to the remote card. I created a shortcut though as it would just be way simpler to access the remote card with one click on my mobile device.

[ukmgranger]

Would you suggest posting this issue to the main HA github, or to the PHU icon one??

[Nerwyn]

Try to recreate it with a default card first. Like create a shortcut to a view/subview with a bunch of Home Assistant buttons using phu icons to recreate the issue. Then if you can recreate it there create an issue in the main HA github. If it's two custom frontend add-ons interacting they'll be less likely to do much about it, but if you can recreate the behavior with custom icons and default cards then they have more to go on.

I had similar intermittent issues with custom material icons not consistently loading in some situations, so I do believe it can happen with default Home Assistant frontend elements.

[ukmgranger]

() So clearing the storage & the cache on the HA companion app sorted the problem out. ()

After three or 4 times opening the shortcut, I was back to the same issue.

[Nerwyn]

But could you recreate it with default buttons?

[ukmgranger]

Yup - exactly the same issue with default buttons.

[Nerwyn]

Can you create the issue with default buttons on the Home Assistant frontend repo and close out this bug? Since it isn't an issue with this bug but an issue with custom icons load order in general.