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. How to add icon to button?

How to add icon to button?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
10 Posts 5 Posters 14.1k Views 3 Watching
  • 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.
  • Taz742T Offline
    Taz742T Offline
    Taz742
    wrote on last edited by A Former User
    #1

    hi guys..
    does anybody know how can I insert icon file on Button?
    language: QML

    Do what you want.

    ? 1 Reply Last reply
    1
    • M Offline
      M Offline
      mostefa
      wrote on last edited by
      #2

      Hi @Taz742

      I think that this can be achieved using iconSource property

      http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#iconSource-prop

      Hope this can help !

      Taz742T 1 Reply Last reply
      2
      • M mostefa

        Hi @Taz742

        I think that this can be achieved using iconSource property

        http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#iconSource-prop

        Hope this can help !

        Taz742T Offline
        Taz742T Offline
        Taz742
        wrote on last edited by
        #3

        @mostefa
        can you give me some example please :)

        Do what you want.

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mostefa
          wrote on last edited by
          #4

          @Taz742

          here is a full sample for you,

          import QtQuick 2.4
          import QtQuick.Controls 1.3
          import QtQuick.Window 2.2
          import QtQuick.Dialogs 1.2
          
          ApplicationWindow {
              title: qsTr("Hello World")
              width: 640
              height: 480
              visible: true
          
              Button{
                  anchors.fill: parent
                  text: "ButtonWithIcon"
                  iconSource: "qrc:/youricon.png"
              }
          }
          

          Correct import file according to your Qt versions,

          I advise you to read Button doc.
          http://doc.qt.io/qt-5/qml-qtquick-controls-button.html

          Taz742T 1 Reply Last reply
          1
          • M mostefa

            @Taz742

            here is a full sample for you,

            import QtQuick 2.4
            import QtQuick.Controls 1.3
            import QtQuick.Window 2.2
            import QtQuick.Dialogs 1.2
            
            ApplicationWindow {
                title: qsTr("Hello World")
                width: 640
                height: 480
                visible: true
            
                Button{
                    anchors.fill: parent
                    text: "ButtonWithIcon"
                    iconSource: "qrc:/youricon.png"
                }
            }
            

            Correct import file according to your Qt versions,

            I advise you to read Button doc.
            http://doc.qt.io/qt-5/qml-qtquick-controls-button.html

            Taz742T Offline
            Taz742T Offline
            Taz742
            wrote on last edited by
            #5

            @mostefa
            it works
            thanks bro ;)

            Do what you want.

            1 Reply Last reply
            1
            • M Offline
              M Offline
              mostefa
              wrote on last edited by
              #6

              @Taz742

              You are welcome =)

              1 Reply Last reply
              0
              • Taz742T Taz742

                hi guys..
                does anybody know how can I insert icon file on Button?
                language: QML

                ? Offline
                ? Offline
                A Former User
                wrote on last edited by
                #7

                @Taz742 Next time, please give your thread a meaningful title. And when your problem is solved, mark the thread accordingly. We have a small visual forum guide for newcomers: Hitchhiker's Visual Guide to the Qt Forum and there is also the Forum general guide. One more thing: The image upload feature on our forum is broken, see How to insert image on this forum for a workaround. :-)

                1 Reply Last reply
                3
                • E Offline
                  E Offline
                  EvilMav
                  wrote on last edited by EvilMav
                  #8

                  May I extend the question: how do I do that using system theme icons rather then resources?

                  I've successfully implemented an QQuickImageProvider using QIcon::fromTheme() to access system icons and convert it to pixmap. I've registered it with the engine as "sysicons" and it works flawlessly on Images:

                  Image {
                       source: "image://sysicons/" + icon
                    }
                  

                  However, setting iconSource on a button the same way seems to have no effect.

                  ? 1 Reply Last reply
                  1
                  • E EvilMav

                    May I extend the question: how do I do that using system theme icons rather then resources?

                    I've successfully implemented an QQuickImageProvider using QIcon::fromTheme() to access system icons and convert it to pixmap. I've registered it with the engine as "sysicons" and it works flawlessly on Images:

                    Image {
                         source: "image://sysicons/" + icon
                      }
                    

                    However, setting iconSource on a button the same way seems to have no effect.

                    ? Offline
                    ? Offline
                    A Former User
                    wrote on last edited by A Former User
                    #9

                    @EvilMav You can simply set iconName to the the name the icon has in the theme and use iconSource as a fallback.

                    RokeJulianLockhartR 1 Reply Last reply
                    1
                    • ? A Former User

                      @EvilMav You can simply set iconName to the the name the icon has in the theme and use iconSource as a fallback.

                      RokeJulianLockhartR Offline
                      RokeJulianLockhartR Offline
                      RokeJulianLockhart
                      wrote on last edited by
                      #10

                      You can simply set iconName to the the name the icon has in the theme and use iconSource as a fallback.

                      Can anyone provide an example for this? I also want to utilise the system icons, if possible.

                      When using a forum, remember to tag the person you are responding to, in case they are not subscribed to the thread.

                      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