Qt World Summit: Register Today!

Colored Icons not showing for Qt Quick Actions

  • Hi,
    I have a code snippet like this :

    Action {
                    id : newActionId
                    text: qsTr("&New")
                    icon.source: "images/aboutQtIcon.aboutQtIcon.png"
                    onTriggered: {console.log("Clicked on new")}

    in my menus but I noticed that colored icons are not showing when I set them as icons. However my black and white icons are showing up. Is there anything one should do for "colored" icons to show up. Or is there anything I am missing with the Default style used by Qt Quick Apps. My imports are

    import QtQuick 2.11
    import QtQuick.Controls 2.4

    Any input would help.

  • Moderators

    Are you sure the paths are correct? Is the icon shown when you use plain Image component (just for test)? Are the colorful icons in the same format (PNG)?

    Are you sure you're not using resources (QRC)? Relative paths in QML are a rare sight. Nothing wrong about them, it's just not that common so I'm asking to be sure.

  • I faced exactly the same problem. Have you find solved this problem?

  • Hi @QSamBok and @Compozitor,

    According QT documentation:
    The icon color is specified by default so that it matches the text color in different states. In order to use an icon with the original colors, set the color to "transparent".

    This way you must use:

    icon.color: "transparent"

  • Yes @ndias, I read it in the documentation, but it doesn't work.
    Here is a portion of my code.

    Action {
            id: telegramUserAction;
            text: qsTr("&Telegram users");
            icon {
                color: "transparent";
                source: "qrc:/img/telegram.png";
                width: 32
                height: 32
            onTriggered: mainForm.manageTelegramUsers()

Log in to reply