Try again to size the icons correctly.

With this I get pixel perfext icons that are properly sized (as opposed
to tiny). The toolbuttons in the messagelist still look a bit out of
place though.

Closer investigation showed that I get most icons rendered at 22px size
(that's a grid unit for me). The full button ends up being 32px.
The mark as unread button has only 24px size source and is therefore
scaled which then ends up looking blurry.

3 files changed, 6 insertions, 9 deletions

diff --git a/framework/qml/AttachmentDelegate.qml b/framework/qml/AttachmentDelegate.qml
index d4e025dc..46cf76f9 100644
--- a/framework/qml/AttachmentDelegate.qml
+++ b/framework/qml/AttachmentDelegate.qml
@@ -63,6 +63,7 @@ Item {
             width: height
             iconName: Kube.Icons.save_inverted
             onClicked: root.download()
+            padding: 0
         }
     }
 }
diff --git a/framework/qml/Icon.qml b/framework/qml/Icon.qml
index 6dc9529f..947e69ef 100644
--- a/framework/qml/Icon.qml
+++ b/framework/qml/Icon.qml
@@ -22,11 +22,9 @@ Item {
     id: root
     property string iconName
     property url iconSource
-    property alias implicitHeight: image.implicitHeight
-    property alias implicitWidth: image.implicitWidth
     property alias status: image.status
-    width: implicitWidth
-    height: implicitHeight
+    property alias implicitWidth: image.implicitWidth
+    property alias implicitHeight: image.implicitHeight
 
     onIconNameChanged: setImageSource()
 
@@ -39,7 +37,7 @@ Item {
 
     Image {
         id: image
-        anchors.centerIn: parent
+        anchors.fill: parent
         sourceSize.width: width
         sourceSize.height: height
         cache: true
diff --git a/framework/qml/IconButton.qml b/framework/qml/IconButton.qml
index a2a9245d..b9b20102 100644
--- a/framework/qml/IconButton.qml
+++ b/framework/qml/IconButton.qml
@@ -24,7 +24,7 @@ import org.kube.framework 1.0 as Kube
 T.Button {
     id: root
 
-    property var iconName
+    property alias iconName: icon.iconName
 
     width: Kube.Units.gridUnit + padding * 2
     height: Kube.Units.gridUnit + padding * 2
@@ -48,9 +48,7 @@ T.Button {
     }
 
     contentItem: Kube.Icon {
-        width: root.height - Kube.Units.smallSpacing * 2
-        height: width
-        iconName: root.iconName
+        id: icon
     }
 }