Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

using icons AND formatting text with buttons



  • Hi all -

    I need to implement some buttons with icons and text. I'm hitting some formatting problems:
    (1)
    It appears that using:

    display: AbstractButton.TextBesideIcon
    

    means I can't (directly) use a Label for my text. I can sort of use a Label like this:

    RoundButton {
       Label {
          id: label
          visible: false
          text: "REAGENTS"
          color: 'white'
       }
       text: label.text
       icon.source: '/images/warning_24px.svg'
       icon.color: 'white'
       display: AbstractButton.TextBesideIcon
    }
    

    Which gives me the actual text, but not the ability to do anything with it (like set the color). Plus, I don't think this is the desired approach anyway. Suggestions?

    (2)
    My attempts at using the icon file are producing a big FAIL (this is supposed to be a triangle with a bang sign) :
    button.PNG
    The icons supplied by our designer are in .svg format; should I ask for something else?

    Thanks...



  • Hi @mzimmers

    I think the lines bellow provide the result you are expecting:

    import QtQuick.Controls.Material
    
    RoundButton {
       Material.foreground: "white" // (text color)
       text: "REAGENTS"
       icon.source: 'file:Resources/Tools-icon.png'
       icon.color: "transparent"
       //display: AbstractButton.TextBesideIcon
    }
    

    8828fd6e-3cdf-4871-8c4b-0838b33a744f-image.png

    or based on https://forum.qt.io/topic/127468/using-icons-and-formatting-text-with-buttons/2

        RoundButton {
            id : iconButton
            text: "REAGENTS"
            icon.source: 'file:Resources/Tools-icon.png'
            icon.color: "transparent"
    
            height: 55
            width: 120
    
            contentItem:Item {
                Row {
                    spacing : iconButton.width*0.05
                    anchors.centerIn: parent
                    Image {
                        id: menuButtonIcon
                        source: iconButton.icon.source
                        anchors.verticalCenter: parent.verticalCenter
                        width: iconButton.icon.width
                        height: iconButton.icon.height
                    }
                    Text {
                        text: iconButton.text
                        anchors.verticalCenter: parent.verticalCenter
                        color: "white"
                    }
                }
            }
    

    Best Regards



  • @ndias thanks for the suggestions. I've tried both:

    buttons.PNG

    The first example doesn't change the text color to white for me.

    The second example doesn't display the icon, probably because I haven't given it a color. The icon is an .svg file, and I had to give it a color (white) in the first example. I'm not sure I can use the Image component with this file.

    (I swapped the order of the text and icon in the second example, because that's how the designer wants it.)

    If you have any other ideas, I'd love to hear them.

    Thanks...



  • @mzimmers Did you get any error that the image file is missing in second example.In that case please check the path.



  • @flowery no, no error. The path is the same for both buttons:

        RoundButton {
            id: reagentButton1
            Material.foreground: textAndIconColor
            text: buttonText
            icon.source: iconSource
            icon.color: textAndIconColor
            anchors.top: spacer1.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            background: Rectangle {
                color: warningColor
                radius: parent.radius
            }
        }
    
        RoundButton {
            id: reagentButton2
            height: buttonHeight
            width: buttonWidth
            anchors.horizontalCenter: parent.horizontalCenter
            text: buttonText
            background: Rectangle {
                color: warningColor
                radius: reagentButton2.radius
            }
            contentItem:Item {
                Row {
                    spacing : reagentButton2.width * 0.05
                    anchors.centerIn: parent
                    Text {
                        text: reagentButton2.text
                        anchors.verticalCenter: parent.verticalCenter
                        color: textAndIconColor
                    }
                    Image {
                        id: menuButtonIcon
                        source: root.iconSource
                        anchors.verticalCenter: parent.verticalCenter
                        width: reagentButton2.icon.width
                        height: reagentButton2.icon.height
                    }
                }
            }
        }
    

    I think it has to do with the fact that this is an uncolored .svg file, and, while I can assign a color to an icon property of a button, I can't do the same for an Image. Just not sure how to work around this one.



  • @ndias in looking at this a bit more, I think (at least part of) the problem is that I haven't defined a Qt Quick Control Style. Did you define a style (presumably Material) on your system?


Log in to reply