Add Icons to Buttons

TeroStyle/Button.qml

@@ -1,30 +1,50 @@
 import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls.impl as I
 import QtQuick.Templates as T
 
 T.Button {
     id: control
 
-    implicitHeight: implicitContentHeight
-    implicitWidth: contentItem.width
+
+    icon.color: Colors.foreground
+    icon.height: 21
+    icon.width: 21
+    implicitHeight: Math.max(
+        implicitBackgroundHeight + topInset + bottomInset,
+        implicitContentHeight + topPadding + bottomPadding
+    )
+    implicitWidth: Math.max(
+        implicitBackgroundWidth + leftInset + rightInset,
+        implicitContentWidth + leftPadding + rightPadding
+    )
+    padding: Dimensions.s - (icon.source.toString() === "" ? 0 : 1)
 
     background: Rectangle {
+        anchors.fill: parent
         color: Colors.primary
         radius: Dimensions.radius
     }
-    contentItem: Text {
-        color: Colors.foreground
-        font: control.font
-        padding: Dimensions.s + 2
+    contentItem: I.IconLabel {
+        spacing: Dimensions.s
+        mirrored: control.mirrored
+        display: control.display
+        icon: control.icon
         text: control.text
-        // Make sure the button is at least wide enough to be comfortably clickable
-        width: Math.max(implicitWidth, 120)
-        horizontalAlignment: Text.AlignHCenter
+        font: control.font
+        color: Colors.foreground
+    }
+
+    onIconChanged: () => {
+        // console.log("ICON '" + JSON.stringify(icon.source) + "' " + (icon.source.toString() === "") + " ");
     }
 
     MouseArea {
         id: mouseArea
+
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
-        onPressed: (mouse) => mouse.accepted = false
+
+        onPressed: mouse => mouse.accepted = false
     }
 }