diff --git a/esphome/energymonitor.yaml b/esphome/energymonitor.yaml
index 6c519a5..0eaca10 100644
--- a/esphome/energymonitor.yaml
+++ b/esphome/energymonitor.yaml
@@ -109,6 +109,16 @@ font:
     glyphsets:
       - GF_Latin_Kernel
     glyphs: ["äöüÄÖÜß"]
+  - file: "fonts/materialdesignicons-webfont.ttf"
+    id: font_icon
+    size: 24
+    glyphs:
+      - "\U000F0306" # mdi:key
+      - "\U000F091F" # mdi:wifi-strength-1
+      - "\U000F0922" # mdi:wifi-strength-2
+      - "\U000F0925" # mdi:wifi-strength-3
+      - "\U000F0928" # mdi:wifi-strength-4
+      - "\U000F092D" # mdi:wifi-strength-off
 
 globals:
   - id: page_index
@@ -195,41 +205,25 @@ display:
         it.printf(260, 10, id(font_small), Color::WHITE, TextAlign::TOP_RIGHT, "--:--");
       }
 
-      // The WireGuard key reflects the remote peer status.
+      // Green means the WireGuard peer is online; red means it is offline.
       const bool wireguard_online = id(energymonitor_wireguard).is_peer_up();
       const Color wireguard_color = wireguard_online ? Color(64, 255, 64) : Color(255, 80, 80);
-      it.circle(270, 15, 5, wireguard_color);
-      it.line(274, 19, 284, 29, wireguard_color);
-      it.line(279, 24, 282, 21, wireguard_color);
-      it.line(282, 27, 285, 24, wireguard_color);
-      if (!wireguard_online) {
-        it.line(265, 30, 285, 10, wireguard_color);
-      }
+      it.printf(286, 8, id(font_icon), wireguard_color, TextAlign::TOP_RIGHT, "\U000F0306");
 
-      // A radio-wave Wi-Fi symbol shows RSSI quality; a red slash means disconnected.
+      // Render the requested MDI Wi-Fi strength glyph in green or red when disconnected.
       const bool wifi_online = id(wifi_connected);
-      int wifi_bars = 1;
-      if (wifi_online && id(wifisignal).has_state()) {
-        const float rssi = id(wifisignal).state;
-        wifi_bars = rssi >= -55 ? 4 : rssi >= -67 ? 3 : rssi >= -75 ? 2 : 1;
-      }
       const Color wifi_color = wifi_online ? Color(64, 255, 64) : Color(255, 80, 80);
-      it.filled_circle(299, 28, 2, wifi_color);
-      if (wifi_bars >= 2 || !wifi_online) {
-        it.line(296, 25, 299, 22, wifi_color);
-        it.line(299, 22, 302, 25, wifi_color);
-      }
-      if (wifi_bars >= 3 || !wifi_online) {
-        it.line(293, 23, 299, 17, wifi_color);
-        it.line(299, 17, 305, 23, wifi_color);
-      }
-      if (wifi_bars >= 4 || !wifi_online) {
-        it.line(290, 20, 299, 12, wifi_color);
-        it.line(299, 12, 308, 20, wifi_color);
-      }
-      if (!wifi_online) {
-        it.line(290, 30, 308, 12, wifi_color);
+      const char *wifi_icon = "\U000F092D"; // mdi:wifi-strength-off
+      if (wifi_online) {
+        if (id(wifisignal).has_state()) {
+          const float rssi = id(wifisignal).state;
+          wifi_icon = rssi >= -55 ? "\U000F0928" : rssi >= -67 ? "\U000F0925"
+                    : rssi >= -75 ? "\U000F0922" : "\U000F091F";
+        } else {
+          wifi_icon = "\U000F091F";
+        }
       }
+      it.printf(312, 8, id(font_icon), wifi_color, TextAlign::TOP_RIGHT, "%s", wifi_icon);
 
       if (id(page_index) == 0) {
         it.printf(12, 12, id(font_small), Color::WHITE, "Netzleistung");