use symbol font for symbols

modules/BarIcon.qml

@@ -7,6 +7,6 @@ Text {
     text: icon
     color: M.Theme.base05
     font.pixelSize: M.Theme.fontSize + 1
-    font.family: M.Theme.fontFamily
+    font.family: M.Theme.iconFontFamily
     verticalAlignment: Text.AlignVCenter
 }

modules/Bluetooth.qml

@@ -28,8 +28,14 @@ Row {
         onTriggered: proc.running = true
     }
 
+    M.BarIcon {
+        visible: root.status === "connected"
+        icon: ""
+        anchors.verticalCenter: parent.verticalCenter
+    }
     Text {
-        text: root.status === "connected" ? (" " + root.device) : ""
+        visible: root.status === "connected"
+        text: root.device
         color: M.Theme.base05
         font.pixelSize: M.Theme.fontSize + 1
         font.family: M.Theme.fontFamily

modules/Cpu.qml

@@ -2,8 +2,9 @@ import QtQuick
 import Quickshell.Io
 import "." as M
 
-Text {
+Row {
     id: root
+    spacing: 2
 
     property int usage: 0
     property real freqGhz: 0
@@ -51,9 +52,15 @@ Text {
         }
     }
 
-    text: " " + root.usage.toString().padStart(2) + "%@" + root.freqGhz.toFixed(2)
-    color: M.Theme.base05
-    font.pixelSize: M.Theme.fontSize
-    font.family: M.Theme.fontFamily
-    verticalAlignment: Text.AlignVCenter
+    M.BarIcon {
+        icon: ""
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Text {
+        text: root.usage.toString().padStart(2) + "%@" + root.freqGhz.toFixed(2)
+        color: M.Theme.base05
+        font.pixelSize: M.Theme.fontSize
+        font.family: M.Theme.fontFamily
+        verticalAlignment: Text.AlignVCenter
+    }
 }

modules/Disk.qml

@@ -2,8 +2,9 @@ import QtQuick
 import Quickshell.Io
 import "." as M
 
-Text {
+Row {
     id: root
+    spacing: 2
 
     property int freePct: 0
     property real totalTb: 0
@@ -30,9 +31,15 @@ Text {
         onTriggered: proc.running = true
     }
 
-    text: " " + root.freePct + "% " + root.totalTb.toFixed(1)
-    color: M.Theme.base05
-    font.pixelSize: M.Theme.fontSize
-    font.family: M.Theme.fontFamily
-    verticalAlignment: Text.AlignVCenter
+    M.BarIcon {
+        icon: ""
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Text {
+        text: root.freePct + "% " + root.totalTb.toFixed(1)
+        color: M.Theme.base05
+        font.pixelSize: M.Theme.fontSize
+        font.family: M.Theme.fontFamily
+        verticalAlignment: Text.AlignVCenter
+    }
 }

modules/Memory.qml

@@ -2,8 +2,9 @@ import QtQuick
 import Quickshell.Io
 import "." as M
 
-Text {
+Row {
     id: root
+    spacing: 2
 
     property int percent: 0
 
@@ -30,9 +31,15 @@ Text {
         onTriggered: meminfo.reload()
     }
 
-    text: " " + root.percent + "%"
-    color: M.Theme.base05
-    font.pixelSize: M.Theme.fontSize
-    font.family: M.Theme.fontFamily
-    verticalAlignment: Text.AlignVCenter
+    M.BarIcon {
+        icon: ""
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Text {
+        text: root.percent + "%"
+        color: M.Theme.base05
+        font.pixelSize: M.Theme.fontSize
+        font.family: M.Theme.fontFamily
+        verticalAlignment: Text.AlignVCenter
+    }
 }

modules/Network.qml

@@ -42,16 +42,21 @@ Row {
         onTriggered: proc.running = true
     }
 
-    Text {
-        text: {
+    M.BarIcon {
+        icon: {
             if (root.state === "wifi")
-                return " " + root.essid;
+                return "";
             if (root.state === "eth")
                 return "󰈀";
             if (root.state === "linked")
                 return "󱘖";
             return "󰣽";
         }
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Text {
+        visible: root.state === "wifi"
+        text: root.essid
         color: M.Theme.base05
         font.pixelSize: M.Theme.fontSize + 1
         font.family: M.Theme.fontFamily

modules/Temperature.qml

@@ -2,8 +2,9 @@ import QtQuick
 import Quickshell.Io
 import "." as M
 
-Text {
+Row {
     id: root
+    spacing: 2
 
     property int celsius: 0
 
@@ -19,9 +20,16 @@ Text {
         onTriggered: thermal.reload()
     }
 
-    text: " " + root.celsius + "°C"
-    color: root.celsius > 80 ? M.Theme.base08 : M.Theme.base05
-    font.pixelSize: M.Theme.fontSize
-    font.family: M.Theme.fontFamily
-    verticalAlignment: Text.AlignVCenter
+    M.BarIcon {
+        icon: ""
+        color: root.celsius > 80 ? M.Theme.base08 : M.Theme.base05
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Text {
+        text: root.celsius + "°C"
+        color: root.celsius > 80 ? M.Theme.base08 : M.Theme.base05
+        font.pixelSize: M.Theme.fontSize
+        font.family: M.Theme.fontFamily
+        verticalAlignment: Text.AlignVCenter
+    }
 }

modules/Theme.qml

@@ -26,6 +26,7 @@ QtObject {
     property color base0F: "#f2cdcd"
 
     property string fontFamily: "sans-serif"
+    property string iconFontFamily: "Symbols Nerd Font"
     property int fontSize: 12
     property real barOpacity: 0.9
     property int barHeight: 32
@@ -51,6 +52,8 @@ QtObject {
         }
         if (data.fontFamily)
             root.fontFamily = data.fontFamily;
+        if (data.iconFontFamily)
+            root.iconFontFamily = data.iconFontFamily;
         if (data.fontSize)
             root.fontSize = data.fontSize;
         if (data.barOpacity !== undefined)

modules/Weather.qml

@@ -32,6 +32,6 @@ Text {
     text: root.label
     color: M.Theme.base05
     font.pixelSize: M.Theme.fontSize
-    font.family: M.Theme.fontFamily
+    font.family: M.Theme.iconFontFamily
     verticalAlignment: Text.AlignVCenter
 }