Display materialdesign icons on ESPHome attached to screen

ESPHome
22

Im no expert by any means, but you need to add glyphs

For eg

  - file: 'fonts/GothamRnd-Bold.ttf'
    id: font_small_bold
    size: 20
    glyphs: 
      ['&', '@', '!', ',', '.', '"', '%', '(', ')', '+', '-', '_', ':', '°', '0',
       '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
       'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
       'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', 'a', 'b', 'c', 'd', 'e', 'f',
       'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
       'u', 'v', 'w', 'x', 'y', 'z', '/','[', ']',"'"]

Basically is missing characters

1 Like
23

Thanks for you’re code!

One question though, I get this

/config/esphome/to-do.yaml:212:15: error: reference to 'time' is ambiguous

How are you doing time?

Thanks

EDIT

Got a step further, but now more lost LOL

/config/esphome/to-do.yaml:212:36: error: ISO C++ forbids comparison between pointer and integer [-fpermissive]
           if (homeassistant_time < 1900) {
                                    ^~~~

And a little further LOL, but I guess it doesn’t like the output :frowning:

error: no match for 'operator<' (operand types are 'esphome::time::ESPTime' and 'int')
24

Check my full code from here: Air Quality Sensors + E-Ink Display using ESPHome

25

Thank you for this post!!!
Exactly the process helped me.

26

You can also use this without having to find the unicode values for icons:

image:
  - file: mdi:alert-outline
    id: alert
    resize: 80x80
    • Material Design Icons: Specify the Material Design Icon id in the format mdi:icon-name, and that icon will automatically be downloaded and added to the configuration.
5 Likes
28

Got this working great, but is it possible to change the colour of the icon?

1 Like
29

yes was it possible to change icon color ?