PHU icons "sometimes" loading - found a replicatable issue

Configuration Frontend
1

I just ran across a repeatable issue with phu: icons not loading on the dashboard. It’s always been “refresh cache” but that’s never fixed it for me – sometimes made it worse. See a repeatable failure here: Imgur: The magic of the Internet (too large for in-line).

The setup is simple: I have a Christmas Tree phu: icon used on two entities. They are the dashboard. When I reload, hard-refresh, the icons don’t show. However, when I edit the block - it’s there; and, only when I hit save does it successfully load both entities on the dashboard.

This definitely points to something on the dashboard failing to properly load the icons pack for the dashboard only.

This issue has been bugging me for “decades” (okay, months, but feels like decades!), and I finally stumbled upon a situation that actually replicated for me:

Edit, see it, save: both load
Hard refresh (Shift-Cmd-R): both icons disappear.
Edit, see it, save: both icons load.

I was able to repeat, over and over.

Browser: Firefox, 146.0.1
OS: macOS (latest)
HA: 2025.12.5
Dashboard: Sections
Block type: grid
Card type: tile

Hopefully this can help to finally trace down exactly what’s causing third-party icons from showing up on the dashboard(s).

2

For testing, try this:

  1. Remove a line for that plug-in from resources.
  2. Add a line for a corresponding js file into configuration as an external module:

frontend:
  ...
  extra_module_url:
    - /local/…/xxx.js
3

This solution IS working. And it appears to be solid. I refreshed dozen of times on the browser, tablet, and the macOS app, and the icons remain! Woohoo!

So, the issues does appear to be how it’s getting loaded in the resources. More details on my install:

It’s add-on: GitHub - elax46/custom-brand-icons: Custom brand icons for Home Assistant
Installed via HACS

I added path: /local/community/custom-brand-icons/custom-brand-icons.js

May I ask: is there a reason things work more reliably loading via the server-side module vs within front end HACS resources?

4

Not a big expert, but imho in both cases JS files are loaded on a client side. I am going to dig into it deeper; so far I noticed that a JS module loaded as a “dashboard resource” does not work on system (not dashboard) pages; but that “extra” thing works everywhere.

5

That would make sense. I’d expect that. With that in mind, maybe there’s something holding back loading certain modules until it “validates” the dashboard is actually using it? And with non-mdi: icons, it’s having a hard noticing they are being actively used on the dashboard? I had notice card-mod sometimes fails to load, too. I moved that to an “extra” as well and it’s more reliable as well.

Apparently it’s a “known issue” for card-mod – they have a “Performance Improvements” section (see additional footnote 1) and actually mentions this in the console which I just noticed while debugging this issue.

6

Imho cardmod is a different thing; btw, try remove it from resources and add ONLY as an extra module, it should probably work (may be it will not with a cast, cannot check).

7

Also, suggest you to mark a post with a solution as a “solution” to help people.

8

Good point. Done. Thanks for a solution!

1 Like