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?
Forum Updated to NodeBB v4.3 + New Features

How to add icon to button?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
10 Posts 5 Posters 12.6k 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 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