use svg icons instead of goofy font

modules/bar/Bat.qml

@@ -1,4 +1,6 @@
 import Quickshell.Services.UPower
+import Quickshell
+import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Effects
@@ -15,30 +17,33 @@ BarComponent {
     implicitHeight: Config.moduleHeight
     implicitWidth: batLayout.implicitWidth + 16
 
-    function batteryIcon(percent) {
-        if (root.charging)
-            return "battery_android_frame_bolt";
-        if (percent <= 15)
-            return "battery_android_alert";
-        if (percent <= 30)
-            return "battery_android_frame_2";
-        if (percent <= 50)
-            return "battery_android_frame_3";
-        if (percent <= 70)
-            return "battery_android_frame_4";
-        if (percent <= 85)
-            return "battery_android_frame_5";
-        if (percent <= 100)
-            return "battery_android_frame_full";
+    function batteryIcon(percent, charging) {
+	if(percent <= 10) return charging ?  "battery-empty-charging" : "battery-empty"
+	if(percent <= 30) return charging ? "battery-level-30-charging" : "battery-level-30" 
+	if(percent <= 40) return charging ? "battery-level-40-charging" : "battery-level-40" 
+	if(percent <= 50) return charging ? "battery-level-50-charging" : "battery-level-50" 
+	if(percent <= 60) return charging ? "battery-level-60-charging" : "battery-level-60" 
+	if(percent <= 70) return charging ? "battery-level-70-charging" : "battery-level-70" 
+	if(percent <= 80) return charging ? "battery-level-80-charging" : "battery-level-80" 
+	if(percent <= 90) return charging ? "battery-level-90-charging" : "battery-level-90" 
+	if(percent >= 90) return charging ? "battery-level-100-charging" : "battery-level-100" 
+        
     }
     RowLayout {
         id: batLayout
         anchors.centerIn: root
-        MaterialIcon {
-            text: root.batteryIcon(root.percent)
-        }
+	IconImage {
+	    source: Quickshell.iconPath(root.batteryIcon(root.percent, root.charging) + "-symbolic")
+	    implicitSize: Config.iconSize
+	    layer.enabled: true
+	    layer.effect: MultiEffect {
+		colorization: 1.0
+		colorizationColor: Colors.text
+		brightness: 0.5
+	    }
+	}
         StyledText {
-            text: Math.floor(root.percent) + "%"
+            text: Math.floor(root.percent,root.charging) + "%"
         }
     }
 }

modules/bar/Mpris.qml

@@ -3,6 +3,8 @@ import Quickshell.Services.Mpris
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Effects
+import Quickshell
+import Quickshell.Widgets
 import qs
 import qs.widgets
 import qs.settings
@@ -18,13 +20,21 @@ BarComponent {
         }
         return null;
     }
-    visible: spotify !== null && spotify.playbackState === MprisPlaybackState.Playing
+    visible: spotify !== null
+    active: clickHandler.containsMouse
     RowLayout {
         id: songLayout
         anchors.centerIn: root
-        MaterialIcon {
-            text: "music_note_2"
-        }
+	IconImage {
+	    source: Quickshell.iconPath("folder-music-symbolic")
+	    implicitSize: Config.iconSize
+	    layer.enabled: true
+	    layer.effect: MultiEffect {
+		colorization: 1.0
+		colorizationColor: Colors.text
+		brightness: 0.5
+	    }
+	}
         StyledText {
             Layout.maximumWidth: 400
             Layout.maximumHeight: Config.barHeight / 1.6
@@ -32,4 +42,12 @@ BarComponent {
             elide: Text.ElideRight
         }
     }
+    MouseArea {
+	id: clickHandler
+	anchors.fill: root
+	hoverEnabled: true
+	onClicked: root.spotify.togglePlaying()
+	acceptedButtons: Qt.LeftButton
+	cursorShape: Qt.PointingHandCursor
+    }
 }

modules/bar/Pw.qml

@@ -1,6 +1,9 @@
+//@ pragma IconTheme Adwaita
 pragma ComponentBehavior: Bound
 import Quickshell.Services.Pipewire
 import Quickshell.Io
+import Quickshell.Widgets
+import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Effects
@@ -18,17 +21,18 @@ BarComponent {
     function getVolumeIcon() {
         let volume = Pipewire.ready ? root.defaultAudio.audio.volume : null;
         if (root.mute) {
-            return "\ue04f";
+            return "audio-volume-muted";
         }
         if (volume <= 0.33) {
-            return "\ue04e";
+            return "audio-volume-low";
         }
         if (volume <= 0.66) {
-            return "\ue04d";
+            return "audio-volume-medium";
         }
         if (volume >= 0.66) {
-            return "\ue050";
+            return "audio-volume-high";
         }
+	
     }
 
     PwObjectTracker {
@@ -45,10 +49,16 @@ BarComponent {
         id: pwLayout
         anchors.centerIn: root
         spacing: 4
-        MaterialIcon {
-            text: root.getVolumeIcon()
-            opacity: root.defaultAudio?.audio.muted ? 0.6 : 1.0
-        }
+	IconImage {
+	    source: Quickshell.iconPath(root.getVolumeIcon() + "-symbolic", root.getVolumeIcon())
+	    implicitSize: 14
+	    layer.enabled: true
+	    layer.effect: MultiEffect {
+		colorization: 1.0
+		colorizationColor: Colors.text
+		brightness: 0.5
+	    }
+	}
         StyledText {
             text: Math.round(root.defaultAudio?.audio.volume * 100) + "%"
             opacity: root.defaultAudio?.audio.muted ? 0.6 : 1.0

modules/bar/Ws.qml

@@ -16,6 +16,7 @@ BarComponent {
 	Repeater {
 	    model: WindowManager.screenProjection(root.barScreen).windowsets
 	    delegate: Rectangle {
+		id: wsContainer
 		required property var modelData
 		visible: modelData.shouldDisplay
 		StyledText {
@@ -23,6 +24,13 @@ BarComponent {
 		    anchors.centerIn: parent
 		    text: parent.modelData.name
 		    color: parent.modelData.active ? Colors.base0D: Colors.base03
+		    MouseArea {
+			id: clickHandler
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			acceptedButtons: Qt.LeftButton
+			onClicked: parent.parent.modelData.activate()
+		    }
 		}
 	    }
 	}