Custom icon help

mattlward · October 24, 2022, 12:39am

i have tried several things found in various posts here and cannot seem to get my icon to load… The icon is located in config/www/pficon.ico. I have also tried with a png of the same icon.

This is the code from the entities card:

  - icon: /local/pficon.ico
    name: PFsense
    type: weblink
    url: https://192.168.1.1:8081/index.php

Have also tried this…

  - entity_picture: /local/pficon.ico
    name: PFsense
    type: weblink
    url: https://192.168.1.1:8081/index.php

The latter results in this for pfsense on the final card… This link icon oddly enough is the one that I used on the top of my main lovelace panel. Not sure what i am doing wrong here…

petro · October 25, 2022, 3:56pm

Make it an svg file, not an ico file. ICO files are a windows format last I checked.

mattlward · October 26, 2022, 2:48am

A .png file will not work either? OK, gotta figure out what an svg file is… Will try.

But, how do I make use of it once I have it?

mattlward · October 26, 2022, 2:54am

Ok, tried both entity_picture: and icon: The entity_picture resulted in the link icon again and the icon: resulted in a blank icon location.

This really should not be this hard.

petro · October 26, 2022, 9:16am

A png file will work as well

petro · October 26, 2022, 10:47am

Also, you should only be using picture_entity. icon is for built in icons only. Lastly, the custom integration for fontawesome has the ability to add custom svg icons that are usable in the icon field.

mattlward · October 26, 2022, 4:39pm

Ok, so I must be an idiot… Here is my full card and this still does not work…

entities:
  - icon: mdi:home-assistant
    name: Portainer.io
    type: weblink
    url: http://192.168.1.6:8123/hassio/ingress/a0d7b954_portainer
  - icon: mdi:home-assistant
    name: Yaml Lint
    type: weblink
    url: http://www.yamllint.com/
  - icon: mdi:pi-hole
    name: PiHole
    type: weblink
    url: http://192.168.1.7/admin/index.php
  - picture_entity: /local/pficon.svg
    name: PFsense
    type: weblink
    url: https://192.168.1.1:8081/index.php
  - icon: mdi:home-assistant
    name: Smokeping
    type: weblink
    url: http://192.168.1.7/cgi-bin/smokeping.cgi
  - icon: mdi:home-assistant
    name: Home Assistant Forums
    type: weblink
    url: https://community.home-assistant.io/
  - icon: mdi:git
    name: Git Hub
    type: weblink
    url: https://github.com/
  - icon: mdi:home-battery
    name: LRUPS stats
    type: weblink
    url: http://192.168.1.7/cgi-bin/nut/upsstats.cgi/
  - icon: mdi:home-battery
    name: LRUPS settings
    type: weblink
    url: http://192.168.1.7/cgi-bin/nut/upsset.cgi/upsset.cgi
show_header_toggle: false
title: Weblink
type: entities

GH2user · October 29, 2022, 9:57am

You can not change the entities icon in this way.
I think your options are (but I will be corrected when wrong) either;

look for a matching icon on Material Design Icons and hope it is supported by HomeAssistant
use customise.yaml as indicated here My own icons - #9 by petro
create your own icon in svg format (optimised) using Inkscape
add this to your own icon set
example GitHub - arallsopp/hass-hue-icons: Additional vector icons for home assistant to model Philips Hue bulbs and fixtures.

If you want to add many custom icons the last option would be the way forward. If you search on Github for hass icons or home assistant icons you will find many more repositories with custom icons.

mattlward · October 29, 2022, 8:18pm

So, I got it working with the SimpleIcons integration. I wish I understood more about github and I would try to make my own repo with a custom icon set.

Thanks to all for the help here.