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,17 +7,12 @@ 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
-    implicitHeight: Settings.config.barHeight - 10
-    Item {
-        id: root
-        anchors.centerIn: parent
-        implicitWidth: textRow.width
-        implicitHeight: Settings.config.barHeight
+    implicitWidth: textRow.implicitWidth + 20
+    implicitHeight: Settings.config.barHeight - 8
     property var sink: Pipewire.defaultAudioSink
     function getVolumeIcon() {
         // Safety check: if Pipewire is dead or sink is missing
@@ -40,13 +36,13 @@ Rectangle {
         // If it's loud, prepare the ears!
         return "volume_up";
     }
-        Row {
+    RowLayout {
         id: textRow
-            anchors.centerIn: root
-            spacing: 5
+        spacing: 2
+        anchors.centerIn: parent
         CustomText {
             id: volumeText
-                anchors.verticalCenter: parent.verticalCenter
+
             PwObjectTracker {
                 objects: Pipewire.ready ? Pipewire.defaultAudioSink : []
             }
@@ -55,7 +51,7 @@ Rectangle {
         }
         CustomIcon {
             id: volumeIcon
-                anchors.verticalCenter: parent.verticalCenter
+            Layout.alignment: Qt.AlignVCenter
             opacity: Pipewire.ready ? root.sink.audio.muted ? 0.5 : 1 : 0
             text: Pipewire.ready ? root.getVolumeIcon() : null
         }
@@ -72,5 +68,4 @@ Rectangle {
         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