Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. using icons AND formatting text with buttons
Forum Update on Monday, May 27th 2025

using icons AND formatting text with buttons

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
6 Posts 3 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • mzimmersM Offline
    mzimmersM Offline
    mzimmers
    wrote on last edited by
    #1

    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...

    ndiasN 1 Reply Last reply
    0
    • mzimmersM mzimmers

      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...

      ndiasN Offline
      ndiasN Offline
      ndias
      wrote on last edited by ndias
      #2

      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

      mzimmersM 2 Replies Last reply
      1
      • ndiasN ndias

        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

        mzimmersM Offline
        mzimmersM Offline
        mzimmers
        wrote on last edited by
        #3

        @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...

        1 Reply Last reply
        0
        • F Offline
          F Offline
          flowery
          wrote on last edited by
          #4

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

          mzimmersM 1 Reply Last reply
          0
          • F flowery

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

            mzimmersM Offline
            mzimmersM Offline
            mzimmers
            wrote on last edited by mzimmers
            #5

            @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.

            1 Reply Last reply
            0
            • ndiasN ndias

              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

              mzimmersM Offline
              mzimmersM Offline
              mzimmers
              wrote on last edited by
              #6

              @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?

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved