Hi all.
Sometimes, in some situations, the mdi icons are not enough.
Home Assistant makes available, in some cases, the ** entity_picture ** but, if you want change color to the image, this is possible only with a creation of 2 images, one in “off” state and one in “on” state. Images that need to be replaced with a conditional style.
This works but it’s not that flexible, if you want change image color, you have to create a new one with the desired color.
I found an “workaround”, I created a custom font with the necessary icons and I use text instead of icons to display them.
Sorry for my English, let me explain better with an example.
it is possible to create your own font using any type of icon, both free offered by the site or created personal.
Just upload SGV images and group them in a single project, in a few seconds you can download your tff and woff font.
For example, I needed the LG icons for the washing machine, but on mdi they were not present. I captured the icons from the LG manual and turned them into vector sgv with Adobe Illustrator.
After uploading all the images to the icomoon website i have this set of icons for my fonts
After click “Generate font” the site present all icons and relative code.
By default the code is a NOT PRINTABLE CHARACTER, you can change the code one by one or, in one shot, clicked “RESET” button → “RESET CODE” and choose the start code.
I suggest using the classic alphabet code, start by 61.
After generate and downloading the font, this is the result
I have upload woff and css files in www directory (i have created a www/fonts directory)
The css must contain
@font-face {
font-family: 'LGIcon';
src:url("/local/fonts/LGIcon.woff") format("woff");
}
/local/fonts/ is a HA path where you upload the files.
Then I setting the css as a HA resource.
There is no need to restart anything,
You immediately have your set of icons to use in label \ name \ text
For my project, I have recreate the display of my LG Washing Machine.
This is an example with a different colors
I have used a glance card and this is a glance code
- type: glance
columns: 4
show_name: true
show_icon: false
show_state: false
style: |
ha-card {
font-family: "LGIcon"; **#your font name**
font-size: 30px; **#your font size**
color: gray; **#default color**
}
entities:
- entity: sensor.lavatrice_run_state
name: "a" #this is a letter I using on icomoon site to mapping one of my icons
style: |
# change name color based on state
.name {
color:
{% if states(config.entity) == 'Lavaggio' %}
white!Important;
{% endif %}
}
- entity: sensor.lavatrice_run_state
name: "b"
style: |
.name {
color:
{% if states(config.entity) == 'Asciugatura' %}
white!Important;
{% endif %}
}
- entity: sensor.lavatrice_run_state
name: "c"
style: |
.name {
color:
{% if states(config.entity) == 'Risciaquo' %}
white!Important;
{% endif %}
}
- entity: sensor.lavatrice_run_state
name: "d"
style: |
.name {
color:
{% if states(config.entity) == 'Centrifuga' %}
white!Important;
{% endif %}
}
Is important using the printable character to mapping icons in icomoon site, otherwise you cannot use in simple way on HA.
I hope I was clear and helpful, if you have any questions I am available.
Sorry again for my english.
Best regards,
Marco