Custom icon set not loading until I reselect the lovelace dashboard

Web browser

Chrome on Mac

Web browser version

Version 92.0.4515.107 (Official Build) (x86_64)

System Health details

System Health

version	core-2021.7.4
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
virtualenv	false
python_version	3.9.5
os_name	Linux
os_version	5.9.16
arch	aarch64
timezone	Europe/London

Home Assistant Community Store

GitHub API	ok
Github API Calls Remaining	5000
Installed Version	1.13.2
Stage	running
Available Repositories	843
Installed Repositories	7

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Home Assistant OS 6.1
update_channel	stable
supervisor_version	supervisor-2021.06.8
docker_version	20.10.6
disk_total	113.9 GB
disk_used	6.4 GB
healthy	true
supported	true
board	odroid-n2
supervisor_api	ok
version_api	ok
installed_addons	Samba share (9.5.1), File editor (5.3.3), RPC Shutdown (2.2), Home Assistant Google Drive Backup (0.103.1), Terminal & SSH (9.1.3), Visual Studio Code (3.6.0), ngrok Client (2.1.6), ESPHome (1.20.3)

Lovelace

dashboards	4
resources	4
views	10
mode	storage

Checklist

• I’m running the newest version of HACS https://github.com/hacs/integration/releases/latest
• I have filled out the issue template to the best of my ability.
• I have read https://hacs.xyz/docs/issues
• This issue is related to the frontend of HACS.
• This issue only contains 1 issue (if you have multiple issues, open one issue for each issue).

Describe the issue

I am using a hacs frontend script to add custom icons to my dashboard. When I load home assistant, the script supporting that icon set does not appear to load until I manually re-select the lovelace dashboard. Having the icons in use on my default view means no icons show up until I click into another lovelace dash or system page, then reselect the one I started with.

Reproduction steps

1. Add the HACS default frontend script at https://github.com/arallsopp/hass-hue-icons to add icons.
2. Employ these icons in a dashboard that is set as your default view.
3. Refresh or load Home Assistant in the browser.
4. Observe the custom icons are absent.
5. Select another dashboard or Map, Logbook, history, etc.
6. Select the dashboard again to see the icons in place.

If the icons are not used in the default view, the issue is impossible to detect, as a manual click on the dashboard menu seems to fix it.

Video recording of issue in this unlisted youtube clip.

• Disclaimer: I am the author of that icon script.

Screenshots

Before manual selection of the dashboard

hass and mdi:icons are visible, but the custom icons used to inform the first bank of lights is not shown.

After manual (re)selection of this dashboard

hass and mdi:icons are accompanied by the custom icons.

Javascript logs from your browser console

app.62541dd1.js:13499 The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'.
55704 @ app.62541dd1.js:13499
s @ app.62541dd1.js:36082
53918 @ app.62541dd1.js:1279
s @ app.62541dd1.js:36082
(anonymous) @ app.62541dd1.js:36082
(anonymous) @ app.62541dd1.js:42188
(anonymous) @ app.62541dd1.js:42188
hass-hue-icons.js?hacstag=3844345221040:359  HASS-HUE-ICONS    Version 1.0.40    
slider-entity-row.js?hacstag=1448997001710:59 SLIDER-ENTITY-ROW 17.1.0 IS INSTALLED 
swipe-navigation.js?hacstag=183995552136:51 ≡ swipe-navigation      ⋮ version 1.3.6            
fold-entity-row.js?hacstag=1507819942004:42 FOLD-ENTITY-ROW 20.0.4 IS INSTALLED

[ludeeus]

You request them before they can be used.

Use frontend.extra_module_url for icons like (https://github.com/elax46/custom-brand-icons) or register it with an integration (like https://github.com/thomasloven/hass-fontawesome)

[arallsopp]

Perfect. Thank you.