Toolbutton icon source

qcoderpro

Hi all,

In the following Qt 6 (CMake build) project:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 600; height: 400
    visible: true

 /* Image {
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        source: "images/menu.png"
    } */
    ToolButton {
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        icon.source: "images/menu.png"
    }
}

the source of the image file works for the Image element, but the error below turns up when it's used for the source in ToolButton:
qrc:/qt-project.org/imports/QtQuick/Controls/Material/ToolButton.qml: QML IconImage: Cannot open: qrc:/qt-project.org/imports/QtQuick/Controls/Material/images/menu.png

How to solve it, please?

Ulysses Fonseca

@qcoderpro

For me solved using the Qt.resolvedUrl, like this:

ToolButton {
        anchors.centerIn: parent
        icon.source: Qt.resolvedUrl("images/svg/settings.svg")
}

qcoderpro

No idea how to solve this issue!?

Markkyboy

You may need to add the Url of the image/images into your .pro file;

SOURCES += \
        main.cpp

RESOURCES += qml.qrc \
    images/previous.png \    <------
    images/next.png \    <-----

By not adding this, i note that the project builds but the image/s cannot be opened;

file:///C:/Qt/5.15.2/mingw81_32/qml/QtQuick/Controls.2/ToolButton.qml: QML IconImage: Cannot open: qrc:/images/next.png
file:///C:/Qt/5.15.2/mingw81_32/qml/QtQuick/Controls.2/ToolButton.qml: QML IconImage: Cannot open: qrc:/images/previous.png

qcoderpro

@Markkyboy

I'm suing CMake. As well as, the project doesn't include a .qrc file.

arun-holoplot

@qcoderpro

You should use icon.name: "menu" instead of icon.source, then the icon will be loaded from the platform theme

Ref:
AbstractButton::icon
QIconTheme

qcoderpro

@arun-holoplot
It shows the button but not the .png file:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 600; height: 400
    visible: true

    header: ToolBar {
           Flow {
               anchors.fill: parent
               ToolButton {
                   text: qsTr("Open")
                   icon.name: "menu"
                  // icon.source:"images/menu.png"
                   onClicked: console.log("Shown")
               }
           }
       }
}

Ulysses Fonseca

I'm with the same problem, i have a project porting from QT5.15.2 working, but now the images of ToolButton using icon.source, don't show, i add all images using qt_add_qml_module by RESOURCES adding each svg image, on the Image work well, but not on ToolButton.

fcarney

I don't know if this will help, but I dug this up earlier:
https://forum.qt.io/topic/91984/adding-qrc-icon-resource-to-a-cmake-qt-project/14

Read the whole thing.

Ulysses Fonseca

@qcoderpro

For me solved using the Qt.resolvedUrl, like this:

ToolButton {
        anchors.centerIn: parent
        icon.source: Qt.resolvedUrl("images/svg/settings.svg")
}

StudentQT

Even though this thread is old and solved, I want to share the solution, you've probably been looking for:

import QtQuick.Controls.Basic

Button {
   contentItem: Row {
        IconImage {
            source: mySource
            color: myColor
        }
        Text {
            ... 
        }
    }
    background: Rectangle {
        ...
    }
}

Just stumbled over it by accident (QtCreator's autocorrection offered it to me). IconImage seems to be the private Item, which Qt uses for the icon property of the Abstractbutton or the Action Element (https://doc.qt.io/qt-6/qtquickcontrols-icons.html)
Thats why you have to import the QtQuick.Controls.Basic
Hope it helps someone, who has the same problem.