In custom actions, why does netflix needs a custom svg but Disney not

[Forsskieken]

Hi there,

When I start using custom actions, I noticed that the icons disapeared.
Luckily you can add a custom_icons.
But why is it that for Netflix I needed to create one but for jellyfin or primevideo not?
Kind regards

type: custom:universal-remote-card
remote_id: remote.shield
media_player_id: media_player.shield
keyboard_id: remote.shield
title: Android TV
styles: |-
  .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
rows:
  - - netflix
    - youtube
    - jellyfin
    - primevideo
  - - volume_buttons
  - - circlepad
    - clickwheel
  - - back
    - home
    - search
    - spotify
custom_actions:
  - type: button
    name: netflix
    icon: netflix
    tap_action:
      action: call-service
      service: script.netflix_with_lights
  - type: button
    name: jellyfin
    icon: jellyfin
    tap_action:
      action: call-service
      service: script.jellyfin_with_lights
  - type: button
    icon: primevideo
    name: primevideo
    tap_action:
      action: call-service
      service: script.prime_with_lights
  - type: circlepad
    name: circlepad
    tap_action:
      action: key
      key: DPAD_CENTER
      remote_id: remote.shield
    up:
      icon: mdi:chevron-up
      tap_action:
        action: key
        key: DPAD_UP
        remote_id: remote.shield
      hold_action:
        action: repeat
      styles: ""
    down:
      icon: mdi:chevron-down
      tap_action:
        action: key
        key: DPAD_DOWN
        remote_id: remote.shield
      hold_action:
        action: repeat
    left:
      icon: mdi:chevron-left
      tap_action:
        action: key
        key: DPAD_LEFT
        remote_id: remote.shield
      hold_action:
        action: repeat
      styles: ""
    right:
      icon: mdi:chevron-right
      tap_action:
        action: key
        key: DPAD_RIGHT
        remote_id: remote.shield
      hold_action:
        action: repeat
    styles: |-
      :host {
        width: 220px;
        margin-left: 0px;
        margin-right: 0px;
      }
      .circlepad {
        border: 1px solid #444;
        background: radial-gradient(circle at top left, #202020 15%, #303030 100%);
        --icon-color: rgba(128,128,128,1);
      }
      #center::part(button) {
        background: radial-gradient(circle at top left, #303030 15%, #101010 100%);
        border: 1px solid rgba(0, 0, 0, 0.5);
      }
      #center::part(icon) {
        color: rgba(128,128,128, 0.8);
        --size: 36px;
      }
      #left, #right {
        width: 100%;
      }
    icon: ok
    value_attribute: friendly_name
  - type: circlepad
    name: clickwheel
    styles: |-
      :host {
        width: 220px;               /* fixed size */
        max-width: 60vw; 

      }
      .circlepad {
        border: 1px solid #444;
        background: radial-gradient(circle at top left, #202020 15%, #303030 100%);
        --icon-color: rgba(128,128,128,1);
        border-radius: 50%;
        aspect-ratio: 1 / 1; 
      }

      #center::part(button) {
        background: radial-gradient(circle at top left, #303030 15%, #101010 100%);
        border: 1px solid rgba(0, 0, 0, 0.5);
      }
      #center::part(icon) {
        color: rgba(128,128,128, 0.8);
        --size: 36px;
      }

      #left,
      #right {
        width: 100%;
      }
    up:
      styles: |-
        .label {
          color: var(--icon-color);
          font-size: min(16px, 6vw);
          translate: var(--icon-offset) calc(-1 * var(--icon-offset));
        }    
      icon: mdi:keyboard
      tap_action:
        action: keyboard
        remote_id: remote.shield
    down:
      styles: |-
        .icon {
          translate: calc(-1 * var(--icon-offset)) var(--icon-offset);

        }
      icon: mdi:play-pause
      tap_action:
        action: key
        key: MEDIA_PLAY_PAUSE
    left:
      icon: mdi:skip-backward
      styles: |-
        .icon {
          translate: calc(-1 * var(--icon-offset)) calc(-1 * var(--icon-offset));
        }
      tap_action:
        action: key
        key: MEDIA_PREVIOUS
    right:
      icon: mdi:skip-forward
      styles: |-
        .icon {
          translate: var(--icon-offset) var(--icon-offset);
        }
      tap_action:
        action: key
        key: MEDIA_NEXT
    drag_action:
      action: key
      key: VOLUME_{{"UP" if clockwise else "DOWN"}}
    tap_action:
      action: key
      key: CAPTIONS
    icon: mdi:closed-caption-outline
custom_icons:
  - name: netflix
    path: >-
      M 8.966 22.563 H 4.001 V 1.5069 H 9 L 14.958 12.985 V 1.5069 h 5 V 22.4931
      H 15 L 8.962 9.948 Z
  - name: ok
    path: >-
      M7 7A2 2 0 005 9V15A2 2 0 007 17H9A2 2 0 0011 15V9A2 2 0 009 7H7M7
      9H9V15H7V9ZM13 7V17H15V13.7L17 17H19L16 12 19 7H17L15 10.3V7H13Z
platform: Android TV

[Nerwyn]

The Home Assistant default mdi icon set includes an icon for Netflix - mdi:netflix. Icons without the mdi: prefix are custom SVG icons included in this project. The Netflix icon should show up in the icon selector in the configuration UI if you type it in.

[Forsskieken]

I used the yaml configuration. And I noticed that when writing
custom_actions:

• type: button
  name: netflix
  icon: netflix
  the icon disapeared, thats why I usede the custom_icon.
  I found it strange because Disney, primevideo worked