How do I add a custom mdi icon?

[dave_sausages]

I’m currently putting my solar heating system on my Lovelace dashboard, and all is going well, except I can’t figure out how to use my own custom icon. So far I’ve used the “entity picture” option in https://github.com/custom-cards/button-card and put my png in the WWW folder, and my custom image does show, but being an image I can’t make its colour change based on state, so I need to make it an icon. And I also don’t want to have to create a different png for all the different colours required, that will get out of hand once I start really customising my dashboard.

Here’s the current png showing my solar tube collector, all boring and black and unable to change colour

So over to you guys: how do I add my own icon to Home Assistant?

[VDRainer]

Something to read.

Implement some custom icons I've created?

I’ve started creating some custom icons to ‘fill in the gaps’ where Material Design Icons doesn’t already have something suitable. I’m using the template from here https://materialdesignicons.com/custom to create the icons, but I’m not sure how to implement them in my Home Assistant config. I tried entity_picture: /local/my-custom-icon.png but Home Assistant blew the image size up and made it larger than all the other icons, & it seems that Home Assistant automatically colours the icons? Is …

Not sure i this works in the latest versions. There was a change about icons a few versions ago.

[dave_sausages]

Jeez that was a rabbit hole! Ended up about 5 layers of links in and crosseyed

So if I understood it correctly, I need to find a way to convert my PNG into an SVG string somehow and then put that string in a JavaScript file and add it as a module?

[NovaG]

That’s correct. I saw a custom card that looked like the Tesla power wall might be what you want.

[wmaker (Tommy Long)]

I have used Inkscape to draw SVG files. With the late HA change to how Icons are loaded into HA, it takes a bit of work to convert/hand-edit the SVG file so that the string being referred to above can be used with the new js loading scheme.

[tok]

And you can even convert PNG graphics via Path → Trace Bitmap to SVG in Inkscape.

I recommend to Path → Union your icon before saving as Optmized SVG.