NIcon new widget to simplify icons display

Widgets/NCircleStat.qml

@@ -97,10 +97,9 @@ Rectangle {
         anchors.rightMargin: -6 * scaling * contentScale
         anchors.topMargin: Style.marginTiniest * scaling * contentScale
 
-        Text {
+        NIcon {
           anchors.centerIn: parent
           text: root.icon
-          font.family: "Material Symbols Outlined"
           font.pointSize: Style.fontSizeLargeXL * scaling * contentScale
           color: Color.mOnSurface
           horizontalAlignment: Text.AlignHCenter

Widgets/NComboBox.qml

@@ -77,11 +77,10 @@ ColumnLayout {
                                                                                    combo.currentIndex).name : ""
     }
 
-    indicator: NText {
+    indicator: NIcon {
       x: combo.width - width - Style.marginMedium * scaling
       y: combo.topPadding + (combo.availableHeight - height) / 2
       text: "arrow_drop_down"
-      font.family: "Material Symbols Outlined"
       font.pointSize: Style.fontSizeXL * scaling
     }
 

Widgets/NIcon.qml

@@ -0,0 +1,15 @@
+import QtQuick
+import qs.Commons
+import qs.Widgets
+
+Text {
+  text: "question_mark"
+  font.family: "Material Symbols Rounded"
+  font.pointSize: Style.fontSizeLarge * scaling
+  font.variableAxes: {
+    "wght"// slightly bold to ensure all lines looks good
+    : (Font.Normal + Font.Bold) / 2.5
+  }
+  color: Color.mOnSurface
+  verticalAlignment: Text.AlignVCenter
+}

Widgets/NIconButton.qml

@@ -17,7 +17,6 @@ Rectangle {
   property bool enabled: true
   property bool hovering: false
   property real fontPointSize: Style.fontSizeMedium
-  property string fontFamily: "Material Symbols Outlined"
 
   signal entered
   signal exited
@@ -31,17 +30,13 @@ Rectangle {
   border.color: showBorder ? Color.mPrimary : Color.transparent
   border.width: Math.max(1, Style.borderThin * scaling)
 
-  NText {
+  NIcon {
     anchors.centerIn: parent
     // Little hack to keep things centered at high scaling
     anchors.horizontalCenterOffset: -1 * (scaling - 1.0)
     anchors.verticalCenterOffset: 0
     text: root.icon
-    font.family: fontFamily
     font.pointSize: root.fontPointSize * scaling
-    font.variableAxes: {
-      "wght": (Font.Normal + Font.Bold) / 2.0
-    }
     color: (root.hovering || showFilled) ? Color.mOnPrimary : showBorder ? Color.mPrimary : Color.mOnSurface
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter

Widgets/NImageRounded.qml

@@ -61,10 +61,9 @@ Rectangle {
   }
 
   // Fallback icon
-  NText {
+  NIcon {
     anchors.centerIn: parent
     text: fallbackIcon
-    font.family: "Material Symbols Outlined"
     font.pointSize: Style.fontSizeXL * scaling
     visible: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "")
     z: 0

Widgets/NPill.qml

@@ -91,12 +91,11 @@ Item {
       }
     }
 
-    Text {
-      anchors.centerIn: parent
-      font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
-      font.pointSize: Style.fontSizeMedium * scaling
+    NIcon {
       text: root.icon
+      font.pointSize: Style.fontSizeMedium * scaling
       color: showPill ? iconTextColor : collapsedIconColor
+      anchors.centerIn: parent
     }
   }