Important: Please read the Qt Code of Conduct -

QtQuick.Controls 2 Button icon

  • Hello.
    I am just porting my controls to use the version 2
    I have just spent 3 hours trying to put an icon inside a QtQuick.Controls 2 Button. No success yet.

    Lets say i use QML since the first version.

    It's this uncommon to put an icon inside a button that we have RoundButton but not IconButton or an attach property or something simple and fast. What i missed?

    Another problem is to be able to find documentation or examples using QtQuick.Controls 2...

  • @bnogal

    Button {
      Image {}

  • Be sure to have the latest documentation, for the final 5.8 version it's much better than for earlier versions. In Qt Creator open Welcome->Examples and type 'controls 2'.

  • thank you.

    Really, i didnt find that anywhere in the documentation...
    Sometimes it is hard to find out how to do something when you have a previous idea of how it was done before.
    I would add that example to the documentation...

  • Yeah, there's plenty of information which is common to many classes/objects/things and is found in introductory parts of documentation but is difficult to remember when you need it. I felt stupid after fighting some time with the same problem. In this case the 'text' property is just a shorthand, I guess, it creates a Text item which is placed to the Button so that you don't have to write Button{Text{text:''...}}. But this is a general functionality for all items: whatever items you declare inside them are placed there. So there's no need to have 'icon' or 'image' or any other property or ButtonWithImage type. If you create many buttons with icons you can of course create your own type with a shorthand property 'icon' and extra functionality. Here¬®'s mine which uses black icons:

    import QtQuick 2.8
    import QtQuick.Layouts 1.0
    import QtQuick.Controls 2.0
    //import QtQuick.Controls 2.1 // Qt >= 5.8.0 with RoundButton
    import QtGraphicalEffects 1.0
    //RoundButton { // Qt >= 5.8.0
    Button {
        id: button
        text: ""
        implicitWidth: height
        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
        property string source
        Image {
            id: image
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
            sourceSize.height: button.background.height - 6
            height: sourceSize.height
            source: button.source
        ColorOverlay {
            anchors.fill: image
            source: image
            // In dark styles background is dark, this makes the image white
            color: tools.isDarkTheme() ? "#ffffffff" : "00000000"

  • Hi,

    If you want to avoid all that boilerplate code, you could try out the AppButton and IconButton from the V-Play SDK.

    With the V-Play SDK, you can add a nice, native-looking button with an icon with just these lines of code:

        AppButton {
          text: "Click me!"
          icon: IconType.heart
          // color etc...

    Note: this uses icons from FontAwesome.

    All the best,

Log in to reply