Icons doesn't display on App

Hello,

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.

1 Like

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.

1 Like

Hi,

had still the same problem. i integrated fontawesome from HACS. Like described in the instructions from fontawesome, i create the necessary directory \config\custom_icons) and uploaded the icons. The icons have format svg.

In the browser everthing was ok, but in the app were no custom icons.

I tried the hints gave in this thread before:
Hint 1: stopped app, cleared cache and restart mobile.
Hint 2: check webviews version is newest

But what steps have i done that functioned for me?

  • I upload new named versions from the icons and integrated the new names in the necessary card in ha.
  • On mobile I stopped app, deleted cache, deleted app-files and at last deinstalled app.
  • restarted mobile
  • reinstalled ha-app
    => Jackpot

Maybe someone can tell me why it is not possible for me to upload files (icons or graphics) with the same name and they were used. Everytime I see still the old versions. I have to upload that file with a new name. And only clearing cache in firefox never helped. Am I doing something wrong?

Sounds like a bug for the custom component author as the HA frontend uses heavy caching that the app respects.

I was having this problem (icons not showing in the Android app, but OK with web browser).

Can confirm that uninstalling/reinstalling the app was the only thing that worked.

Thanks

It solved the issue on my side