fix centering issue of font icon

modules/bar/Volume.qml

@@ -1,4 +1,5 @@
 import Quickshell.Io
+import QtQuick.Layouts
 import QtQuick
 import Quickshell.Services.Pipewire
 import qs.settings
@@ -6,71 +7,65 @@ import qs.reusables
 import qs
 
 Rectangle {
-    id: container
+    id: root
     radius: implicitHeight / 2
     color: pavuArea.containsMouse ? Colors.primaryContainer : Colors.surfaceContainer
     anchors.verticalCenter: parent.verticalCenter
-    implicitWidth: root.implicitWidth + 20
+    implicitWidth: textRow.implicitWidth + 20
-    implicitHeight: Settings.config.barHeight - 10
+    implicitHeight: Settings.config.barHeight - 8
-    Item {
+    property var sink: Pipewire.defaultAudioSink
-        id: root
+    function getVolumeIcon() {
-        anchors.centerIn: parent
+        // Safety check: if Pipewire is dead or sink is missing
-        implicitWidth: textRow.width
+        if (!sink)
-        implicitHeight: Settings.config.barHeight
+            return "volume_off";
-        property var sink: Pipewire.defaultAudioSink
-        function getVolumeIcon() {
-            // Safety check: if Pipewire is dead or sink is missing
-            if (!sink)
-                return "volume_off";
 
-            // If muted, show the hush icon
+        // If muted, show the hush icon
-            if (sink.audio.muted)
+        if (sink.audio.muted)
-                return "volume_off";
+            return "volume_off";
 
-            // Volume is usually 0.0 to 1.0 (0% to 100%)
+        // Volume is usually 0.0 to 1.0 (0% to 100%)
-            const vol = sink.audio.volume;
+        const vol = sink.audio.volume;
 
-            if (vol <= 0.25)
+        if (vol <= 0.25)
-                return "volume_mute";
+            return "volume_mute";
-            if (vol < 0.75)
+        if (vol < 0.75)
-                return "volume_down";
+            return "volume_down";
-            if (vol <= 1.00)
+        if (vol <= 1.00)
-                return "volume_up";
-
-            // If it's loud, prepare the ears!
             return "volume_up";
+
+        // If it's loud, prepare the ears!
+        return "volume_up";
+    }
+    RowLayout {
+        id: textRow
+        spacing: 2
+        anchors.centerIn: parent
+        CustomText {
+            id: volumeText
+
+            PwObjectTracker {
+                objects: Pipewire.ready ? Pipewire.defaultAudioSink : []
+            }
+            text: Pipewire.ready ? Math.round(root.sink.audio.volume * 100) + "%" : "failure"
+            opacity: Pipewire.ready ? root.sink.audio.muted ? 0.5 : 1 : 0
         }
-        Row {
+        CustomIcon {
-            id: textRow
+            id: volumeIcon
-            anchors.centerIn: root
+            Layout.alignment: Qt.AlignVCenter
-            spacing: 5
+            opacity: Pipewire.ready ? root.sink.audio.muted ? 0.5 : 1 : 0
-            CustomText {
+            text: Pipewire.ready ? root.getVolumeIcon() : null
-                id: volumeText
-                anchors.verticalCenter: parent.verticalCenter
-                PwObjectTracker {
-                    objects: Pipewire.ready ? Pipewire.defaultAudioSink : []
-                }
-                text: Pipewire.ready ? Math.round(root.sink.audio.volume * 100) + "%" : "failure"
-                opacity: Pipewire.ready ? root.sink.audio.muted ? 0.5 : 1 : 0
-            }
-            CustomIcon {
-                id: volumeIcon
-                anchors.verticalCenter: parent.verticalCenter
-                opacity: Pipewire.ready ? root.sink.audio.muted ? 0.5 : 1 : 0
-                text: Pipewire.ready ? root.getVolumeIcon() : null
-            }
-        }
-        MouseArea {
-            id: pavuArea
-            Process {
-                id: pavuLauncher
-                command: ["sh", "-c", "pavucontrol"]
-            }
-            anchors.fill: parent
-            onClicked: pavuLauncher.exec(pavuLauncher.command)
-            acceptedButtons: Qt.LeftButton
-            cursorShape: Qt.PointingHandCursor
-            hoverEnabled: true
         }
     }
+    MouseArea {
+        id: pavuArea
+        Process {
+            id: pavuLauncher
+            command: ["sh", "-c", "pavucontrol"]
+        }
+        anchors.fill: parent
+        onClicked: pavuLauncher.exec(pavuLauncher.command)
+        acceptedButtons: Qt.LeftButton
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+    }
 }

reusables/CustomIcon.qml

@@ -3,9 +3,11 @@ import qs.settings
 import qs
 
 Text {
+    verticalAlignment: Text.AlignVCenter
     property bool fill: true
     font.family: fill ? "Material Symbols Rounded Filled" : "Material Symbols Rounded"
     color: Colors.onSurfaceColor
+    font.pixelSize: 14
     font.variableAxes: ({
             GRAD: 100,
             opsz: fill ? 48 : 20,

reusables/CustomText.qml

@@ -3,6 +3,7 @@ import qs
 import qs.settings
 
 Text {
+    verticalAlignment: Text.AlignVCenter
     color: Colors.onSurfaceColor
     font.family: Settings.config.font
     font.pixelSize: Settings.config.fontSize