Custom icons from Fontawesome not supporting

[HunterX86]

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: 4.1.0

Last working release (if known): 4.0.5 (I think)

Phone OS HA (latest version) on Android

Browser and Operating System: Chrome remote desktop on Windows 11

Description of problem: When I updated to the latest version, it doesn't support fontawesome anymore. I use the prefix fapro for my own icons as described in the manual of fontawesome.

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

Your Full Remote Config

remote_id: remote.woonkamer_cast
enable_button_feedback: true
rows:
  - - npo1
    - npo2
    - npo3
  - - rtl4
    - rtl5
    - sbs6
  - - rtl7
    - veronica
  - - espn1
    - espn2
    - espn3
    - espn4
  - - 24kitchen
    - nponieuws
  - - volume_mute
    - volume_down
    - volume_up
  - - rewind
    - play_pause
    - fast_forward
  - - record
    - guide
    - stop
  - - previous
    - up
    - next
  - - left
    - center
    - right
  - - back
    - down
    - home
  - - canal+
    - null
    - power_on_off
custom_actions:
  - icon: fapro:npo1
    tap_action:
      action: perform-action
      perform_action: script.npo_1_woonkamer
    name: npo1
    type: button
    styles: |-
      :host {
        --icon-color: #D9151B;
      }
  - icon: fapro:npo2
    tap_action:
      action: perform-action
      perform_action: script.npo_2_woonkamer
    name: npo2
    type: button
    styles: |-
      :host {
        --icon-color: #009DDE;
      }
  - icon: fapro:npo3
    tap_action:
      action: perform-action
      perform_action: script.npo_3_woonkamer
    name: npo3
    type: button
    styles: |-
      :host {
        --icon-color: #26DA69;
      }
  - icon: fapro:RTL4-2
    tap_action:
      action: perform-action
      perform_action: script.rtl_4_woonkamer
    name: rtl4
    type: button
    styles: |-
      :host {
        --icon-color: #FF8800;
      }
  - icon: fapro:RTL5-2
    tap_action:
      action: perform-action
      perform_action: script.rtl_5_woonkamer
    name: rtl5
    type: button
    styles: |-
      :host {
        --icon-color: #F10300;
      }
  - icon: fapro:SBS6-2
    tap_action:
      action: perform-action
      perform_action: script.sbs_6_woonkamer
    name: sbs6
    type: button
    styles: |-
      :host {
        --icon-color: #0E7AF8;
      }
  - icon: fapro:RTL7-2
    tap_action:
      action: perform-action
      perform_action: script.rtl_7_woonkamer
    name: rtl7
    type: button
    styles: |-
      :host {
        --icon-color: #EDC004;
      }
  - icon: fapro:veronica
    tap_action:
      action: perform-action
      perform_action: script.veronica_woonkamer
    name: veronica
    type: button
    styles: |-
      :host {
        --icon-color: #00AEEF;
      }
  - icon: fapro:canal_plus
    tap_action:
      action: perform-action
      target:
        entity_id:
          - remote.woonkamer_cast
      data:
        command: F2
      perform_action: remote.send_command
    name: canal+
    type: button
  - icon: mdi:power
    tap_action:
      action: perform-action
      perform_action: remote.turn_off
      data:
        activity: PowerOff
      target:
        entity_id: remote.harmony_hub
    name: power_on_off
    type: button
  - icon: fapro:ESPN
    tap_action:
      action: perform-action
      perform_action: script.espn_1
    name: espn1
    type: button
    styles: |-
      :host {
        --icon-color: #E52534;
      }
  - icon: fapro:ESPN-2
    tap_action:
      action: perform-action
      perform_action: script.espn_2
    name: espn2
    type: button
    styles: |-
      :host {
        --icon-color: #E52534;
      }
  - icon: fapro:ESPN-3
    tap_action:
      action: perform-action
      perform_action: script.espn_3
    name: espn3
    type: button
    styles: |-
      :host {
        --icon-color: #E52534;
      }
  - icon: fapro:ESPN-4
    tap_action:
      action: perform-action
      perform_action: script.espn_4
    name: espn4
    type: button
    styles: |-
      :host {
        --icon-color: #E52534;
      }
  - icon: fapro:24kitchen
    tap_action:
      action: perform-action
      perform_action: script.24kitchen
    name: 24kitchen
    type: button
    styles: |-
      :host {
        --icon-color: lightgreen;
      }
  - icon: fapro:nponieuws
    tap_action:
      action: perform-action
      perform_action: script.nponieuws
    name: nponieuws
    type: button
    styles: |-
      :host {
        --icon-color: lightblue;
      }
haptics: true
visibility:
  - condition: state
    entity: select.harmony_hub_activities
    state: TV Woonkamer

Additional information:

[Nerwyn]

Are you sure this isn't a bug with the Font Awesome plugin? I can't get custom font awesome icons to work with default cards and see this error in the browser console, as if it's not recognizing that it should be searching for this icon locally.

GET http://homeassistant.local:8123/fontawesome/icons/pro/astronaut.svg 404 (Not Found)

[HunterX86]

I'm sure, because i don't have any issues with fontawesome. It happend a couple of version earlier with the android tv card.

[Nerwyn]

I got custom icons working in both default buttons and this card. Can you share the SVGs you're using? Are there any errors in the browser console?

The icons in this card use the same custom element ha-icon as Home Assistant's default cards. I'm not sure if there's anything I can do if it's behaving oddly. This could be a custom element loading issue where it's loading this card before the font-awesome icons, causing the icons to not be available to render.

[HunterX86]

What kind of add-on are you using for your custom icons? If I use that, I'm gonna switch over from fontawesome to the one you have installed.

[Nerwyn]

I mean Font Awesome custom icons. I only installed it to debug this issue otherwise the only custom icons I have are the ones built into this card.

[HunterX86]

I'm gonna use custom SVG path icons instead of fontawesome. It's a bit more work with the svg icons, but it works.

[Nerwyn]

Closing this since it seems like a custom card and custom integration load issue and there are alternatives.