ESPHOME and glyphs from material design icons

ESPHome
1

Hello there , probably a silly problem but I’m trying to define glyphs in ESPHOME to display on my epaper,

downloaded ttf package from material design icons , installed it in windows 11 and opened up symbols to copy specific characters but the window is blank…

or is there another way of defining characters other than copying them from windows font viewer ?

image

2

I know … it’s over 6 months since you asked. But since I am currently facing the “same” problem, I found a way to get the glyph in the ESPhome YAML file.

On the Material Design Icons Library page you find the different glyphs. By clicking on the wanted icon, you get a details page, where you can copy the glyph and insert it into the yaml. See this screenshot…

image
image1259×458 36.9 KB

2 Likes
3

Thanks a lot for this clear and very effective answer, I was looking for a way to do it and I found this topic.

I like this pages.

Philippe

4

Bonjour à mon homonyme !!

In the mean time, I found yet another way of integrating the glyphs in some YAML files. Personally, I prefer now this “new” way, because when you add as a comment the icon name shown on the Material Design Icons Library details page, you get the icon displayed with Studio Code Server in HomeAssistant. :grinning:

image
image1278×599 50 KB

On the details page mentioned above, you also have a button to copy the codepoint of the glyph. With the codepoint copied, you can put it in your YAML code like this. Type

- "\U000

and then paste the copied codepoint thereafter.

The result should be as follows:

.....
# Font definitions
font:
  - file: 'fonts/mdi.ttf'
    id:  mdi_weather
    size: 96
    glyphs: &mdi-weather-glyphs
      - "\U000F0599" # mdi-weather-sunny
      - "\U000F0594" # mdi-weather-night
      - "\U000F0595" # mdi-weather-partly-cloudy
      - "\U000F0F31" # mdi-weather-night-partly-cloudy
      - "\U000F0590" # mdi-weather-cloudy
      - "\U000F0591" # mdi-weather-fog
      - "\U000F0597" # mdi-weather-rainy
      - "\U000F0598" # mdi-weather-snowy
      - "\U000F067F" # mdi-weather-snowy-rainy
      - "\U000F0596" # mdi-weather-pouring
      - "\U000F067E" # mdi-weather-lightning-rainy
.......

And this is the way it gets rendered in Studio Code Server :sunglasses:

image

Greetings
Philippe

5

Bonjour Philippe,

Thanks a lot for sharing it’s helpful and apreciated.

Philippe

Sorry for the delay I was working far from home since 3 weeks.

1 Like