Icons: ArchUpdater, LockScreen, PowerMenu, BT Device List

Widgets/NButton.qml

@@ -80,26 +80,29 @@ Rectangle {
     spacing: Style.marginXS * scaling
 
     // Icon (optional)
-    NIcon {
-      Layout.alignment: Qt.AlignVCenter
-      visible: root.icon !== ""
-      icon: root.icon
-      font.pointSize: root.iconSize
-      color: {
-        if (!root.enabled)
-          return Color.mOnSurfaceVariant
-        if (root.outlined) {
-          if (root.pressed || root.hovered)
-            return root.backgroundColor
-          return root.backgroundColor
-        }
-        return root.textColor
-      }
+    Loader {
+      active: root.icon !== ""
+      sourceComponent: NIcon {
+        Layout.alignment: Qt.AlignVCenter
 
-      Behavior on color {
-        ColorAnimation {
-          duration: Style.animationFast
-          easing.type: Easing.OutCubic
+        icon: root.icon
+        font.pointSize: root.iconSize
+        color: {
+          if (!root.enabled)
+            return Color.mOnSurfaceVariant
+          if (root.outlined) {
+            if (root.pressed || root.hovered)
+              return root.backgroundColor
+            return root.backgroundColor
+          }
+          return root.textColor
+        }
+
+        Behavior on color {
+          ColorAnimation {
+            duration: Style.animationFast
+            easing.type: Easing.OutCubic
+          }
         }
       }
     }

Widgets/NCircleStat.qml

@@ -88,20 +88,21 @@ Rectangle {
       // Tiny circular badge for the icon, positioned using anchors within the gauge
       Rectangle {
         id: iconBadge
-        width: 28 * scaling * contentScale
+        width: iconText.implicitWidth + Style.marginXS * scaling
         height: width
         radius: width / 2
-        color: Color.mSurface
+        color: Color.mPrimary
         anchors.right: parent.right
         anchors.top: parent.top
-        anchors.rightMargin: -6 * scaling * contentScale
-        anchors.topMargin: Style.marginXXS * scaling * contentScale
+        anchors.rightMargin: Style.marginXXS * scaling * contentScale
+        anchors.topMargin: Style.marginXS * scaling * contentScale
 
         NIcon {
+          id: iconText
           anchors.centerIn: parent
           icon: root.icon
-          font.pointSize: Style.fontSizeLargeXL * scaling * contentScale
-          color: Color.mOnSurface
+          font.pointSize: Style.fontSizeS * scaling * contentScale
+          color: Color.mOnPrimary
           horizontalAlignment: Text.AlignHCenter
           verticalAlignment: Text.AlignVCenter
         }

Widgets/NIcon.qml

@@ -4,9 +4,17 @@ import qs.Commons
 import qs.Widgets
 
 Text {
-  property string icon: "balloon"
+  readonly property string defaultIcon: "balloon"
+  property string icon: defaultIcon
 
-  text: Bootstrap.icons[icon]
+  text: {
+    if (Bootstrap.icons[icon] === undefined) {
+      Logger.warn("Icon", `"${icon}"`, "doesn't exist in the bootstrap font")
+      Logger.callStack()
+      return Bootstrap.icons[defaultIcon]
+    }
+    return Bootstrap.icons[icon]
+  }
   font.family: "bootstrap-icons"
   font.pointSize: Style.fontSizeL * scaling
   color: Color.mOnSurface