font: bundle in material symbols rounded

Widgets/DankIcon.qml

@@ -1,9 +1,9 @@
 import QtQuick
 import qs.Common
 
-StyledText {
-    id: icon
-
+Item {
+    id: root
+    
     property alias name: icon.text
     property alias size: icon.font.pixelSize
     property alias color: icon.color
@@ -11,46 +11,60 @@ StyledText {
     property real fill: filled ? 1.0 : 0.0
     property int grade: Theme.isLightMode ? 0 : -25
     property int weight: filled ? 500 : 400
-
+    
+    implicitWidth: icon.implicitWidth
+    implicitHeight: icon.implicitHeight
+    
     signal rotationCompleted()
-
-    font.family: "Material Symbols Rounded"
-    font.pixelSize: Theme.fontSizeMedium
-    font.weight: weight
-    color: Theme.surfaceText
-    verticalAlignment: Text.AlignVCenter
-    horizontalAlignment: Text.AlignHCenter
-    renderType: Text.NativeRendering
-    antialiasing: true
-    font.variableAxes: {
-        "FILL": fill.toFixed(1),
-        "GRAD": grade,
-        "opsz": 24,
-        "wght": weight
+    
+    FontLoader {
+        id: materialSymbolsFont
+        source: Qt.resolvedUrl("../assets/fonts/material-design-icons/variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf")
     }
-
+    
+    StyledText {
+        id: icon
+        
+        anchors.fill: parent
+        
+        font.family: materialSymbolsFont.name
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: root.weight
+        color: Theme.surfaceText
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        renderType: Text.NativeRendering
+        antialiasing: true
+        font.variableAxes: {
+            "FILL": root.fill.toFixed(1),
+            "GRAD": root.grade,
+            "opsz": 24,
+            "wght": root.weight
+        }
+        
+        Behavior on font.weight {
+            NumberAnimation {
+                duration: Theme.shortDuration
+                easing.type: Theme.standardEasing
+            }
+        }
+    }
+    
     Behavior on fill {
         NumberAnimation {
             duration: Theme.shortDuration
             easing.type: Theme.standardEasing
         }
     }
-
-    Behavior on weight {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-
+    
     Timer {
         id: rotationTimer
         interval: 16
         repeat: false
-        onTriggered: icon.rotationCompleted()
+        onTriggered: root.rotationCompleted()
     }
-
+    
     onRotationChanged: {
         rotationTimer.restart()
     }
-}
+}