Add Icon to MenuItem for a QML SystemTrayIcon Menu

Question

In QML using QtQuick 2, it seems to be very easy to add icons to MenuItems in a Menu, according to the Qt docs. But when doing this for a MenuItem in a SystemTrayIcon, nothing happens.

This code produces a context menu for the SystemTrayIcon, but no icons are added to the context menu. How can this be achieved?

Window {
    /*...*/
    SystemTrayIcon {
        visible: true
        id: systrayicon
        icon.name: "my-application"

        menu: Menu {
            title: "My Application"
            
            data: [
                MenuItem {
                    id: quit
                    text: qsTr("&Quit")
                    icon.name: 'window-close'
                    onTriggered: Qt.exit(0)
                },
                MenuItem {
                    id: play
                    text: qsTr("&Play")
                    icon.name: "media-playback-play"
                    onTriggered: dbus.send("Play")
                },
                MenuItem {
                    id: next
                    text: qsTr("&Edit")
                    icon.name: "kwrite"
                    onTriggered: app.edit()
                }
            ]
        }
    }
}

The expected results are that the MenuItems have an icon each. But none of them do. This application is built with qmake/make under Linux using Qt 6.4.

Answer 1

You should probably provide your icons as PNGs in your project and use icon.source to set the icons. icon.name is heavily relying on the OS supporting those icons.

Have a look at the icon.name documentation. There are further links to understand the names better in QIcon::fromTheme(const QStrin &name) like this one http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html

I'm using Qt 6.4.0, Ubuntu 22.04.01 LTS with Xfce 4.16.3 and adapting your demo a bit shows the icon as seen in the gif below.

import QtQuick
import Qt.labs.platform

Window {
    title: "SystemTrayIcon"
    width: 320
    height: 240
    visible: true

    SystemTrayIcon {
        visible: true
        id: systrayicon
        icon.name: "applications-multimedia"

        menu: Menu {
            title: "My Application"

            data: [
                MenuItem {
                    id: quit
                    text: qsTr("&Quit")
                    icon.name: 'application-exit'
                    onTriggered: Qt.exit(0)
                },
                MenuItem {
                    id: play
                    text: qsTr("&Play")
                    icon.name: "media-playback-start"
                    onTriggered: dbus.send("Play")
                },
                MenuItem {
                    id: next
                    text: qsTr("&Edit")
                    icon.name: "accessories-text-editor"
                    onTriggered: app.edit()
                }
            ]
        }
    }
}