I made a new QML project which auto-generated a main.cpp. I added an icon to the qml.qrc which now looks like this:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>bookmark.png</file>
</qresource>
</RCC>
I then add a button and set the icon. The QML Designer doesn't seem to have a field for that, so I have to do it via code. Also I don't want any text on the button:
import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
width: 640
height: 480
visible: true
title: qsTr("Scroll")
Button {
id: button
x: 301
y: 159
icon.source: "qrc:/bookmark.png"
}
}
I compile and run to end up with this window which is what I wanted:
However, the QML Designer shows me this:
As you can see the icon is missing. When designing a more complicated GUI that is heavy on icon-only buttons you end up with a bunch of empty squares that make it very difficult to see what you are doing. In my desperation I tried to set the icon as the background image:
Button {
id: button
x: 301
y: 159
icon.source: "qrc:/bookmark.png"
background: Image {
id: name
source: "qrc:/bookmark.png"
}
}
When I run this I get a button with both the icon and the background image overlapping which makes sense. When I look at it in the QML Designer it stil shows me an empty button.
I can add images just fine, drag+drop of the bookmark.png asset causes an Image
element (also loading qrc:/bookmark.png
) to be added that is visible in both the application and QML Designer, so QML Designer is generally capable of looking into resource files and displaying images.
I'm using Qt Creator/QML Designer plugin 4.14.2.
Is there any workaround to make QML Designer show icons?