Icons doesn't display on App


I use Zeus icons on my HA Lovelace.
When I’m on the Web interface in my computer, it’s OK. But when i go to the mobil App ( android and IOS ) the icons doesn’t display. If I reload core HA with service, or if i change statut of sensor, the icon appears.

I can confirm inconsistent behaviour. Self-made icons are shown in a browser but not in android app:

check that android system webview is up to date, you can also try to get the debug logs and see if any errors are showing up. There are 2 types of logs here, one of which is ADB logcat and the other is chrome developer tools to get the actual webview errors which is what this is. More than likely the self made icons need an update to support better caching to work with android webview.

I’m running Android 11 on a Samsung S20 with all the latest updates. My Android System WebView is the latest version 87.0.4280.101 from 07.12.2020.

The solution was simple: go into Android settings for the HA app and clear the cache there.

You will probably hit the issue again in the future :slight_smile: if your using a custom component id suggest reaching out so they can fix the issue

Hi there, @dshokouhi. I provide the hass-hue-icons of self made icons for the philips hue ecosystem via HACS.

The plugin structure is a single javascript file, and I cannot see how I might extend it to support better caching for android webview. Do you have any pointers on the techniques you were hinting at?

I suppose the alternative is to model the repo as an integration, but that seems like overkill, as isn’t really the HA intended way to extend the front end.

Any pointers? Got a few users who are struggling with this and would like to be able to help them.

For me, the problem never returned. Apart from one single custom icon I use in the tab navigation. It comes and goes as it pleases. I have no idea why and it is part of the same javascript file that I use to manage my self-made icons.

So in terms of the app itself we use the default webview caching method which was confirmed by the frontend team. The HA frontend uses very heavy caching techniques which is why things load as fast as they do but we have seen odd issues as well. A good example is a user that makes use of the HA frontend persistent notification to post an image but the image filename is the same. On android the same image will be used regardless if the actual image has changed, the solution in this case was for the user to use a unique filename.

As the app is just a webview to the frontend I think the frontend team might be of better support here to tell you how the icons are loaded. There isn’t much the app can do here asides from asking the user to reach out to the developer which is what the HA frontend would do as well.

Have you worked with any user to get the remote debugging logs? that may be of the best help: Remote debug Android devices - Chrome Developers

1 Like

Thanks for coming back. That’s a good call. I’ll see if I can get a user to expose that.

1 Like

Nice work with the hue icons. I tried them out and really like them.
Unfortunately I have the same problem with Android devices. So far I can tell, when the icons don’t show up in the app, the icons also don’t show up if you connect with a web browser like firefox or chrome. Now the creepy part. If you lock the device with firefox open and unlock the device the icons appear! This is a really strange behaviour.
On Windows everything works fine.

I had the exact same thing on my android device. So I removed the catch from the Home Assistant app (long press the Home Assistant app until you get a menu, press the exclamation mark and go to storage, clear the catch there and restart the app). After opening the Home Assistant app for the 3rd time, the icons appeared. Until now they are still there.