NIcon new widget to simplify icons display

Modules/SidePanel/Cards/MediaCard.qml

@@ -37,9 +37,8 @@ NBox {
         Layout.fillHeight: true
       }
 
-      NText {
+      NIcon {
         text: "album"
-        font.family: "Material Symbols Outlined"
         font.pointSize: Style.fontSizeXXL * 2.5 * scaling
         color: Color.mPrimary
         Layout.alignment: Qt.AlignHCenter
@@ -93,11 +92,10 @@ NBox {
           elide: Text.ElideRight
         }
 
-        indicator: Text {
+        indicator: NIcon {
           x: playerSelector.width - width
           y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
           text: "arrow_drop_down"
-          font.family: "Material Symbols Outlined"
           font.pointSize: Style.fontSizeXL * scaling
           color: Color.mOnSurface
           horizontalAlignment: Text.AlignRight
@@ -180,13 +178,12 @@ NBox {
           }
 
           // Fallback icon when no album art available
-          NText {
-            anchors.centerIn: parent
+          NIcon {
             text: "album"
             color: Color.mPrimary
-            font.family: "Material Symbols Outlined"
             font.pointSize: Style.fontSizeLarge * 12 * scaling
             visible: !trackArt.visible
+            anchors.centerIn: parent
           }
         }
 

Modules/SidePanel/Cards/WeatherCard.qml

@@ -26,10 +26,9 @@ NBox {
 
     RowLayout {
       spacing: Style.marginSmall * scaling
-      NText {
+      NIcon {
         text: weatherReady ? LocationService.weatherSymbolFromCode(
                                LocationService.data.weather.current_weather.weathercode) : ""
-        font.family: "Material Symbols Outlined"
         font.pointSize: Style.fontSizeXXL * 1.5 * scaling
         color: Color.mPrimary
       }
@@ -94,9 +93,8 @@ NBox {
             text: Qt.formatDateTime(new Date(LocationService.data.weather.daily.time[index]), "ddd")
             color: Color.mOnSurface
           }
-          NText {
+          NIcon {
             text: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
-            font.family: "Material Symbols Outlined"
             font.pointSize: Style.fontSizeXL * scaling
             color: Color.mPrimary
           }

Modules/SidePanel/PowerMenu.qml

@@ -73,15 +73,9 @@ NPanel {
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
 
-            Text {
+            NIcon {
               text: "lock_outline"
-              font.family: "Material Symbols Outlined"
-              font.pointSize: Style.fontSizeLarge * scaling
-              font.variableAxes: {
-                "wght": (Font.Normal + Font.Bold) / 2.0
-              }
               color: lockButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
-              verticalAlignment: Text.AlignVCenter
               anchors.verticalCenter: parent.verticalCenter
               anchors.verticalCenterOffset: 1 * scaling
             }
@@ -133,15 +127,9 @@ NPanel {
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
 
-            Text {
+            NIcon {
               text: "bedtime"
-              font.family: "Material Symbols Outlined"
-              font.pointSize: Style.fontSizeLarge * scaling
-              font.variableAxes: {
-                "wght": (Font.Normal + Font.Bold) / 2.0
-              }
               color: suspendButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
-              verticalAlignment: Text.AlignVCenter
               anchors.verticalCenter: parent.verticalCenter
               anchors.verticalCenterOffset: 1 * scaling
             }
@@ -191,15 +179,9 @@ NPanel {
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
 
-            Text {
+            NIcon {
               text: "refresh"
-              font.family: "Material Symbols Outlined"
-              font.pointSize: Style.fontSizeLarge * scaling
-              font.variableAxes: {
-                "wght": (Font.Normal + Font.Bold) / 2.0
-              }
               color: rebootButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
-              verticalAlignment: Text.AlignVCenter
               anchors.verticalCenter: parent.verticalCenter
               anchors.verticalCenterOffset: 1 * scaling
             }
@@ -249,15 +231,9 @@ NPanel {
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
 
-            Text {
+            NIcon {
               text: "exit_to_app"
-              font.family: "Material Symbols Outlined"
-              font.pointSize: Style.fontSizeLarge * scaling
-              font.variableAxes: {
-                "wght": (Font.Normal + Font.Bold) / 2.0
-              }
               color: logoutButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
-              verticalAlignment: Text.AlignVCenter
               anchors.verticalCenter: parent.verticalCenter
               anchors.verticalCenterOffset: 1 * scaling
             }
@@ -307,15 +283,9 @@ NPanel {
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
 
-            Text {
+            NIcon {
               text: "power_settings_new"
-              font.family: "Material Symbols Outlined"
-              font.pointSize: Style.fontSizeLarge * scaling
-              font.variableAxes: {
-                "wght": (Font.Normal + Font.Bold) / 2.0
-              }
               color: shutdownButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface
-              verticalAlignment: Text.AlignVCenter
               anchors.verticalCenter: parent.verticalCenter
               anchors.verticalCenterOffset: 1 * scaling
             }