Can't get custom icon to display

So, I want to use custom icons for some things in my HA setup.

I’ve got the following things done:

  • I created a www folder in the config folder. Location is /config/www
  • I put in the folder a test icon that I downloaded from the MDI library, to make sure it’s compatible. Specifically this one: account - Material Design Icons - Pictogrammers I downloaded it in .svg format.
  • the location of the file is /config/www/account.svg
  • In lovelace I create a new Button Card and in the icon section I enter location as icon: /local/account.svg
    Result: The Button Card shows a blank space where the icon should be displayed.

Troubleshooting steps:

  • I restarted the HA
  • I checked the https://my.ha/local/account.svg to verify that the icon is properly served and displayed. And it is.
  • I tried several other files. Same result

I’m running HA on HA Yellow and it’s updated to the latest version as of now. I have no other issues at the moment.

I’ve seen some similar topics here in the forum, but the only other which seemed similar to mine, was where the gentleman was using .png files and had to use entity_picture instead of icon. I hope this doesn’t apply in my situation (as far as I tried testing it, it didn’t help anyway) as I want to change entity icon as an end result.

I don’t think svg icons are supported here.
Try a png

Why don’t you use mdi:account ?

because I’m currently using this one just as a test-case, to make sure that a “regular” icon from this location is properly displayed. In final version I intend to use custom icons that I’ll create myself.
But it doesn’t make sense to move onto that part of the testing if I’m not getting the “regular” icon to show up first.

All the instructions and examples that I’ve seen up to this point, said .svg is the way to go. I tried the .png version now as well and no luck either.

@Vlayke did you manage to solve this?