How to make visible both icon and text on QML ToolButton

Question

I am creating desktop application using QML and QtQuick.Components. I want to place on the toolbar buttons like the standard MacOS settings dialogs do:

I use ToolBar and ToolButton, but I can't find the way to do it. For instance with the following code it shows icons only:

ApplicationWindow {
    // ...

    toolBar: ToolBar {
        RowLayout {
            ToolButton {
                text: qsTr("Main")
                iconSource: "main.png"
            }
            ToolButton {
                text: qsTr("System")
                iconSource: "system.png"
            }
            ToolButton {
                text: qsTr("Items Book")
                iconSource: "itemsbook.png"
            }
        }
    }
}

And it seems like ToolButton can show either text or icon:

Text {
    id: textitem
    text: button.text
    anchors.centerIn: parent
    visible: button.iconSource == "" // <=========
}

Polacca

Any reason for not using Actions like in the example? – Ability

@LaszloPapp there is no difference, with Actions only icons are visible too. – Polacca

Answer 1

A simple yet a powerful approach is to create own QML component.

1. Create a custom QML component / file:
   File -> New File or Project -> Qt -> QML File (choose latest version).
   Now enter file name, for example MyToolButton.
   Note that it will be also used as component name.

2. Add there neccesary imports and code:

MyToolButton.qml (customize for your needs)

import QtQuick 2.0
import QtQuick.Controls 1.4

ToolButton
{
    Image {
        source: parent.iconSource
        fillMode: Image.PreserveAspectFit // For not stretching image (optional)
        anchors.fill: parent
        anchors.margins: 2 // Leaving space between image and borders (optional)
        anchors.bottomMargin:10 // Leaving space for text in bottom
    }
    Text {
        text: parent.text

        anchors.bottom: parent.bottom // Placing text in bottom
        anchors.margins: 2 // Leaving space between text and borders  (optional)
        anchors.horizontalCenter: parent.horizontalCenter // Centering text
        renderType: Text.NativeRendering // Rendering type (optional)
    }
}

---

Main.QML (where you want to use it):

import QtQuick 2.0
import QtQuick.Controls 1.4

// Usual toolbar declaration
ToolBar {
    id: mainToolBar
    RowLayout {

        // Create MyToolButton. Note that component name (MyToolButton) is the same as file name.
        MyToolButton {
            id:tbQuit

            // Way 1: Add here any icon 
            iconSource: "qrc:///images/quit.png" 
            text:qsTr("&Quit")

            // Way 2, my favourite: Convert your Action into Button!
            action: actQuit
        }
    }
}

Action {
    id: actQuit
    text: qsTr("&Quit")
    onTriggered: Qt.quit()
    shortcut: "Alt+Q"
    iconSource: "qrc:///Images/Exit.png"
}

---

Notes:

1. It requires QtQuick.Controls 1.4 and should work on Qt 5.2+. (Worked fine on Qt 5.5).
2. Don't forget to add imports.
3. Code parts marked as (optional) can be skipped.
4. Replace ToolButton with Button and it will work as a Button.

Hope it helps!

Googolplex

Doesn't really work in Qt 5.6. I tried and the other answer below by @Kirween but toolbar height can't be adjusted. The text element just overlaps with the image no matter what I do. It is just fattened out. – Aldred

Answer 2

Have you try to add your own Text control like this:

ApplicationWindow {
    // ...

    toolBar: ToolBar {
        RowLayout {
            ToolButton {
                text: qsTr("Main")
                iconSource: "main.png"
                Text {
                    text: parent.text
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
            ToolButton {
                text: qsTr("System")
                iconSource: "system.png"
                Text {
                    text: parent.text
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
            ToolButton {
                text: qsTr("Items Book")
                iconSource: "itemsbook.png"
                Text {
                    text: parent.text
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
        }
    }
}

And set the ToolButton height with the right value (image + text height)

Delicatessen

Looks well, but there is empty space above the icon. – Polacca

Also you can add anchors.bottomMargin: 2 to Text for being nicer – Googolplex

Answer 3

You can create text at the bottom of the button and position it as you wish.

Example:

 Rectangle {
        id: side_panel
        width: parent.width / 10
        height: parent.height - main_toolbar.height
        color: "lightgray"

        anchors {
            top: main_toolbar.bottom
            right: parent.right
        }

        ColumnLayout {
            anchors.fill: parent
            spacing: 1

            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/home.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Home"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/warning.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Alarms"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/settings.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Settings"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/service.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Service"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/reset.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Reset"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/play.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    id: start_stop_text
                    text: "Start"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
                onClicked: {
                    icon.source = icon.source == "../assets/icons/play.png" ? "../assets/icons/pause.png" : "../assets/icons/play.png";
                    start_stop_text.text = icon.source == "../assets/icons/play.png" ? "Start" : "Stop";
                }
            }
        }
    }

Fernand

Answer 4

This is such an old question. The OP and other answers reflect that they're using an older version of Qt. Since QtQuick.Controls 2.3 (Qt 5.10) you can use the display property, e.g.

ToolButton {
    text: qsTr("Main")
    icon.source: "main.svg"
    display: AbstractButton.TextUnderIcon
}

You can Try it Online!

References:

• https://doc.qt.io/qt-6/qml-qtquick-controls-abstractbutton.html#display-prop

Partridge