Wie kann ich in ESPHome Material Design Icons verwenden und in einem Ordner speichern?

Hallo zusammen,

ich arbeite an einem ESPHome-Projekt, das ein OLED-Display (SH1106 128x64) verwendet. Mein Ziel ist es, Material Design Icons (oder ähnliche Grafiken) in meinem Display zu integrieren (Glyphsets). Dazu möchte ich herausfinden:

  1. Wie oder besser wo erstelle ich einen Ordner in ESPHome, in dem ich die Icons speichern kann?
  2. Wie kann ich die Icons dann in meinem YAML-Code referenzieren und auf dem Display anzeigen lassen?

Hier ist mein aktueller YAML-Code für die Konfiguration:

esphome:
  name: display-steckergehause
  friendly_name: display Steckergehäuse 

esp8266:
  board: d1_mini

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: ""

ota:
  - platform: esphome
    password: ""

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password
  manual_ip:
    static_ip: 
    gateway: 
    subnet: 255.255.255.0

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Display-Steckergehause"
    password: ""

captive_portal:

font:
  # Google Fonts Roboto, Regular, Größe 20
  - file: "gfonts://Roboto"
    id: roboto
    size: 20
  # Google Fonts Roboto, Bold, Größe 24
  - file:
      type: gfonts
      family: Roboto
      weight: 900
    id: roboto_16
    size: 20

i2c:
  sda: GPIO5
  scl: GPIO4

display:
  - platform: ssd1306_i2c
    model: "SH1106 128x64"
    lambda: |-
      // Funktion zur Schätzung der Textbreite (Pixel pro Zeichen: 6 für kleine, 8 für große Schrift)
      auto estimate_width = [](std::string text, int char_width) {
        return text.length() * char_width;
      };

      if (id(waschmaschine_power).state > 20.0) {
        int text_width = estimate_width("Waschgang", 6);
        it.printf((128 - text_width) / 2, 0, id(roboto), "Waschgang");  // Erste Zeile
        text_width = estimate_width("läuft", 6);
        it.printf((128 - text_width) / 2, 16, id(roboto), "läuft");    // Zweite Zeile
        text_width = estimate_width("%.0f W", 6);
        it.printf((128 - text_width) / 2, 32, id(roboto), "%.0f W", id(waschmaschine_power).state); // Dritte Zeile
      } else if (id(wasche).state) {
        int text_width = estimate_width("Bereit:", 6);
        it.printf((128 - text_width) / 2, 0, id(roboto), "Bereit:");   // Erste Zeile
        text_width = estimate_width("zum", 6);
        it.printf((128 - text_width) / 2, 20, id(roboto), "zum");      // Zweite Zeile
        text_width = estimate_width("Waschen", 6);
        it.printf((128 - text_width) / 2, 40, id(roboto), "Waschen");  // Dritte Zeile
      } else if (id(avm_infra_waschmaschine).state) {
        int text_width = estimate_width("Steckdose", 12);
        it.printf((128 - text_width) / 2, 0, id(roboto), "Steckdose"); // Erste Zeile
        text_width = estimate_width("ein", 8);
        it.printf((128 - text_width) / 2, 18, id(roboto), "AVM ein");      // Zweite Zeile
        it.printf((128 - 84) / 2, 40, id(roboto), " %.2f W", id(waschmaschine_power).state); // Dritte Zeile
      } else {
         auto now = id(current_time).now();
        if (now.is_valid()) {
          // Anpassung der Uhrzeit: Verschiebung nach links (X - 15)
          int text_width = estimate_width("00:00:00", 8); // Maximale Breite der Uhrzeit
          it.strftime((128 - text_width) / 2 - 15, 0, id(roboto_16), "%H:%M:%S", now); // Erste Zeile, Uhrzeit
          // Vergrößerung des Abstands zur zweiten Zeile (Y + 10)
          it.printf(0, 20, id(roboto), "Netz: %.0f W", id(netz).state);          // Zweite Zeile
          it.printf(0, 40, id(roboto), "Solar: %.0f W", id(solar).state);        // Dritte Zeile
        } else {
          it.printf(0, 4, id(roboto_16), "Keine Uhrzeit");  // Erste Zeile
          it.printf(0, 36, id(roboto_16), "Check System."); // Zweite Zeile
        }
      }

sensor:
  - platform: homeassistant
    name: "SOLAR"
    id: solar
    entity_id: sensor.solar_power

  - platform: homeassistant
    name: "Netz"
    id: netz
    entity_id: sensor.strombezug_aktuell

  - platform: homeassistant
    name: "Waschmaschine Stromverbrauch"
    id: waschmaschine_power
    entity_id: sensor.avm_infra_waschmaschine_power_consumption

  - platform: wifi_signal
    name: "WLAN Signalstärke"
    id: wifi_signal_strength
    update_interval: 60s  

binary_sensor:
  - platform: homeassistant
    name: "Wasche"
    id: wasche
    entity_id: input_boolean.wasche

switch:
  - platform: homeassistant
    name: "AVM Waschmaschine"
    id: avm_infra_waschmaschine
    entity_id: switch.avm_infra_waschmaschine

time:
  - platform: homeassistant
    id: current_time

Zusatzinformationen:
Ich weiß, dass ich Bilder oder Icons in Bitmap-Format (.bmp oder ähnliches) verwenden könnte. Aber ich bin mir unsicher:

  • Wo ich die Icons speichern soll, sodass ESPHome darauf zugreifen kann.
  • Wie ich diese im Code integriere.

Falls jemand ein Beispiel für die Integration von Icons (z. B. ein einfaches WLAN-Symbol oder eine Glühbirne) hat, wäre das großartig!

Vielen Dank im Voraus!

Ich habe es vorerst auf diese Weise umgesetzt. Ob dies die beste Lösung ist, kann ich nicht sagen, aber sie erfüllt ihren Zweck

font:
  - file: "gfonts://Material+Symbols+Outlined"
    id: mdi_medium
    size: 16
    glyphs: [
      "\U0000e1da",  # signal_wifi_off
      "\U0000f0b0",  # signal_cellular_wifi_0_bar
      "\U0000ebe4",  # signal_cellular_wifi_1_bar
      "\U0000ebd6",  # signal_cellular_wifi_2_bar
      "\U0000ebe1",  # signal_cellular_wifi_3_bar
      "\U0000e1d8"   # signal_cellular_wifi_4_bar
    ]

  - file: "gfonts://Roboto"
    id: roboto
    size: 20

  - file:
      type: gfonts
      family: Roboto
      weight: 900
    id: roboto_bold_20
    size: 20

i2c:
  sda: GPIO5
  scl: GPIO4

display:
  - platform: ssd1306_i2c
    model: "SH1106 128x64"
    lambda: |-
      // Position des WiFi-Symbols oben links (x=0, y=0)
      float wifi_strength = id(wifi_signal_pct).state;
      const char *wifi_icon = "\U0000e1da";  // Default: No WiFi
      if (isnan(wifi_strength)) {
        wifi_icon = "\U0000e1da";  // No WiFi
      } else if (wifi_strength < 10) {
        wifi_icon = "\U0000f0b0";  // Low WiFi
      } else if (wifi_strength < 30) {
        wifi_icon = "\U0000ebe4";  // WiFi 1
      } else if (wifi_strength < 50) {
        wifi_icon = "\U0000ebd6";  // WiFi 2
      } else if (wifi_strength < 75) {
        wifi_icon = "\U0000ebe1";  // WiFi 3
      } else {
        wifi_icon = "\U0000e1d8";  // WiFi 4
      }
      it.print(0, 0, id(mdi_medium), wifi_icon);  // WiFi-Symbol links oben


Das suche ich auch noch, vor allem eine Lösung, wo ich dem ESP sagen, das er die Bitmaps z.b. von einem Webserver regelmässig neu laden soll.
Bisher hab ich es nur geschaftt, das die einmalig beim Flashen eben eingebunden werden.

Aber ich hab mich ehrlich gesagt damit auch nicht weiter befasst.