stable icon widths via minIcon, fix volume icon jitter

modules/BarIcon.qml

@@ -7,6 +7,7 @@ Text {
     id: root
     property string icon: ""
     property string tooltip: ""
+    property string minIcon: ""
     property bool _hovered: false
     property string _displayIcon: icon
     property string _pendingIcon: ""
@@ -39,11 +40,20 @@ Text {
             easing.type: Easing.OutQuad
         }
     }
+    width: minIcon ? Math.max(implicitWidth, _minIconMetrics.width) : implicitWidth
+    horizontalAlignment: minIcon ? Text.AlignHCenter : Text.AlignLeft
     color: M.Theme.base05
     font.pixelSize: M.Theme.fontSize + 1
     font.family: M.Theme.iconFontFamily
     verticalAlignment: Text.AlignVCenter
 
+    TextMetrics {
+        id: _minIconMetrics
+        text: root.minIcon
+        font.pixelSize: root.font.pixelSize
+        font.family: root.font.family
+    }
+
     layer.enabled: _hovered && !(parent && parent._hovered === true)
     layer.effect: MultiEffect {
         shadowEnabled: true

modules/Volume.qml

@@ -74,6 +74,7 @@ M.BarSection {
 
     M.BarIcon {
         icon: root._volumeIcon
+        minIcon: "\uF028"
         color: root._volumeColor
         anchors.verticalCenter: parent.verticalCenter
         MouseArea {