Custom monochrome icons dynamically recolored in same way the MDI icons are

Feature Requests
3

Could you post a sample picture here?

4

The mdi icons are svg. If your image is a svg it could be colored in the same way.
Otherwise if your image is a monochrome png a filter: hue-rotate() could be applied to it, but I doubt you will find a suitable image on the internet and if you making your own - better make an svg.

That said if you want just a few icon states and not a continuous spectrum - you can have a few icons and choose the appropriate one via customUI

5

I just switched the fixed color PNGs to their SVG counterparts, and this is the result:

08
08840×970 49.6 KB

So as you can see, the 3 bottom icons (entity_picture via customize) stay black instead of matching the current color of the lights. I have the same issue with the entity_picture for an input_boolean. It would be awesome if these could work the same way as the mdi icons (and if I could also resize these SVGs).

6

Currently the color is only applied to icons.
We could add code that applies color to images (would only affect SVG) or allow loading custom icons.

3 Likes
7

Hmmm maybe applying color to SVG images (entity pictures) would make the most sense. Because if it became possible to use custom (local) icons, that might render entity pictures obsolete. Maybe icons should always be limited to existing resources like mdi?

8

On second thought, it might be easier to allow icon to be a local SVG. I would imagine giving an entity_picture the same style treatment as an icon would cause duplicate code. So in short:

  • add support for local SVG images to icon, while keeping the existing support for MDI icons
  • keep entity_picture for other local images (JPG, PNG, …)
1 Like
9

Local monochrome SVG support would be great.
I have actually successfully submitted some icons to MDI, and have others in the process, but it takes HA a long time to pick up the changes in MDI.
Also there are some icons that are not suitable for MDI - .e.g the philips hue icons, which are free to used but copyrighted
Local SVG icons would be very very useful :slight_smile:

2 Likes
10

Do you use your own icons as pictures or have you set them up as icons in your customize section?

11

I agree, this would be awesome.

12

was this ever implemented? I’m in dire need to set several .svg’s in an icon_template… to be used with mdi:icons and get the same color options.
Would be really great if this could be done.

1 Like
13

As far as I know no, this hasn’t been implemented yet.

14

I dont think it was done.
Its a bit of a shame really :frowning:

15

should we top this on the feature request list again? dont know if this was done in the first place?

Let’s see what @andrey thinks? Please have a look would you? Would be such a cool addition to the feature set.

16

simply trying to get this upped in the feature request priority …

use local .svg files as icon, and be able to color them with icon_color template

as an example of how this is displayed right now:

50

not allowed to upload the file, but it is the now superseded account-settings-variant.svg

1 Like
17

Would be super usefull to be able to use local SVG icons. Actually, some components already use this (dark-sky for exemple), they define local icons to be used for states:
https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/sensor/darksky.py#L134-L145

+1 for what @Mariusthvdb suggested:

  • Be able to use local files for the icon value. This would give either mdi:xxx or /local/icon.svg
  • Color should be applied automatically based on the state

Bonus feature request for lovelace:

  • Able to specify a icon based on the state (like you’d do for picture element with state_image)
  • Able to specify a style and a transform based on the state (super bonus would be a behaviour like the one in andrei custom-ui)
18

+1 as well. This would be very useful.

19

Has any progress been made on this? As far as I know, Lovelace hasn’t brought anything new to the table here but maybe some custom card has?

I use Philips Hue as my lighting solution and, with a developer account, you can download an icon pack which contains the icons used in the official Philips Hue app. Setting them as an entity_picture works, but:

  • an entity picture is shown in a larger size than an icon
  • an entity picture does not get a color based on the state (current color, or even just on/off), unlike an icon does

I’d love to be able to do something like
icon: local:/local/icons/hue/devicesBridgesV2.svg
instead of being restricted to MaterialDesignIcons.

1 Like
20

For anyone interested, I was finally able to achieve the above with the Custom icons loader!

E.g. I can now do icon: custom:heroeslightstrip so a lightstrip entity actually looks like a lightstrip while maintaining the current color representation.

1 Like
21

Unfortunately it seems like Custom icons loader is broken since HA 0.110.
See https://github.com/Armaell/home-assistant-custom-icons-loader/issues/5.

22

For anyone stumbling across this in 2021, hass-hue-icons is a set of colourizable svg icons that extends home assistant to model the hue product range.

See HACS or GitHub - arallsopp/hass-hue-icons: Additional vector icons for home assistant to model Philips Hue bulbs

1 Like