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 ?

30

Also ended up here while trying to change the color of an image icon. So far have been unable to do it via styles. Did you ever figure it out?

31

Color for Icons:

color:
  - id: red
    red: 100% 

    lambda: |-

      it.printf(20, 12, id(icon_font_10), id(red), TextAlign::BASELINE_CENTER, "\U000F06E9");
32

For anyone finding this thread, please be aware that the image component has since been updated.

The recommended way to handle this now is described in the official ESPHome documentation linked below.

1 Like