Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QPushButton: changing icon via setStyleSheet
Forum Updated to NodeBB v4.3 + New Features

QPushButton: changing icon via setStyleSheet

Scheduled Pinned Locked Moved Solved General and Desktop
10 Posts 5 Posters 5.2k 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.
  • sitesvS Offline
    sitesvS Offline
    sitesv
    wrote on last edited by
    #1

    Hi!
    How to change QPushButton icon in runtime?
    I try do something like this:

    b4 = new QPushButton;
    b4->setObjectName("bEthOn_"+QString::number(parent_layout->count()));
    b4->setIconSize(QSize(16, 16));
    b4->setCheckable(true);
    b4->setStyleSheet("QPushButton:checked { qproperty-icon: url(:/icons/icons/eth_play.png); } QPushButton:unchecked { qproperty-icon: url(:/icons/icons/eth_pause.png); }");
    

    But it doesn't working.

    raven-worxR 1 Reply Last reply
    0
    • sitesvS sitesv

      @mrjj
      Hi!
      I'm already set Checkable property and want to use checked/unchecked property.
      And I don't understand why changing background color via stylesheet works, but changing icon - doesn't.

      mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by mrjj
      #8

      @sitesv
      Hi
      Well its due to the use of qproperty-icon
      as background-image, border-image, and image works.
      Just not the icon :)

      Its a limitation/optimaization.

      1 Reply Last reply
      1
      • JoeCFDJ Offline
        JoeCFDJ Offline
        JoeCFD
        wrote on last edited by JoeCFD
        #2

        are your icon files set in qrc file?

        1 Reply Last reply
        0
        • sitesvS Offline
          sitesvS Offline
          sitesv
          wrote on last edited by
          #3

          Yes. Icons in qrc

          1 Reply Last reply
          0
          • sitesvS sitesv

            Hi!
            How to change QPushButton icon in runtime?
            I try do something like this:

            b4 = new QPushButton;
            b4->setObjectName("bEthOn_"+QString::number(parent_layout->count()));
            b4->setIconSize(QSize(16, 16));
            b4->setCheckable(true);
            b4->setStyleSheet("QPushButton:checked { qproperty-icon: url(:/icons/icons/eth_play.png); } QPushButton:unchecked { qproperty-icon: url(:/icons/icons/eth_pause.png); }");
            

            But it doesn't working.

            raven-worxR Offline
            raven-worxR Offline
            raven-worx
            Moderators
            wrote on last edited by
            #4

            @sitesv
            there is no conversion for QIcon type via stylesheets properties.
            Yo ucan create a custom QString-typed QProperty and "forward" it to the QPushButton's icon property.

            --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
            If you have a question please use the forum so others can benefit from the solution in the future

            sitesvS 1 Reply Last reply
            0
            • raven-worxR raven-worx

              @sitesv
              there is no conversion for QIcon type via stylesheets properties.
              Yo ucan create a custom QString-typed QProperty and "forward" it to the QPushButton's icon property.

              sitesvS Offline
              sitesvS Offline
              sitesv
              wrote on last edited by sitesv
              #5

              @raven-worx
              Not really understand your solution.
              I can achieve the icon to be displayed by stylesheet method, but it doesn’t change by clicking

              mrjjM 1 Reply Last reply
              0
              • sitesvS sitesv

                @raven-worx
                Not really understand your solution.
                I can achieve the icon to be displayed by stylesheet method, but it doesn’t change by clicking

                mrjjM Offline
                mrjjM Offline
                mrjj
                Lifetime Qt Champion
                wrote on last edited by mrjj
                #6

                @sitesv

                Hi
                That stylesheet styles the Checked state and not pressed
                so for it to work - the button must have Checkable set to true.
                (its a property)

                So i think you might want the pressed state instead

                QPushButton {
                    background-color: rgb(51, 153, 204); 
                }
                QPushButton:pressed {
                    background-color: rgb(224, 0, 0);
                }
                

                But it wont make you happy as docs says
                "Note: Use the qproperty syntax with care, as it modifies the widget that is being painted. Also, the qproperty syntax is evaluated only once,"

                so it wont work to change icon when clicked

                sitesvS 1 Reply Last reply
                1
                • mrjjM mrjj

                  @sitesv

                  Hi
                  That stylesheet styles the Checked state and not pressed
                  so for it to work - the button must have Checkable set to true.
                  (its a property)

                  So i think you might want the pressed state instead

                  QPushButton {
                      background-color: rgb(51, 153, 204); 
                  }
                  QPushButton:pressed {
                      background-color: rgb(224, 0, 0);
                  }
                  

                  But it wont make you happy as docs says
                  "Note: Use the qproperty syntax with care, as it modifies the widget that is being painted. Also, the qproperty syntax is evaluated only once,"

                  so it wont work to change icon when clicked

                  sitesvS Offline
                  sitesvS Offline
                  sitesv
                  wrote on last edited by
                  #7

                  @mrjj
                  Hi!
                  I'm already set Checkable property and want to use checked/unchecked property.
                  And I don't understand why changing background color via stylesheet works, but changing icon - doesn't.

                  mrjjM J.HilkJ 2 Replies Last reply
                  0
                  • sitesvS sitesv

                    @mrjj
                    Hi!
                    I'm already set Checkable property and want to use checked/unchecked property.
                    And I don't understand why changing background color via stylesheet works, but changing icon - doesn't.

                    mrjjM Offline
                    mrjjM Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on last edited by mrjj
                    #8

                    @sitesv
                    Hi
                    Well its due to the use of qproperty-icon
                    as background-image, border-image, and image works.
                    Just not the icon :)

                    Its a limitation/optimaization.

                    1 Reply Last reply
                    1
                    • sitesvS sitesv

                      @mrjj
                      Hi!
                      I'm already set Checkable property and want to use checked/unchecked property.
                      And I don't understand why changing background color via stylesheet works, but changing icon - doesn't.

                      J.HilkJ Offline
                      J.HilkJ Offline
                      J.Hilk
                      Moderators
                      wrote on last edited by
                      #9

                      @sitesv there is no unchecked property (afaik)

                      use QPushButton { ... } and QPushButton:checked { ... } as identifiers


                      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                      Q: What's that?
                      A: It's blue light.
                      Q: What does it do?
                      A: It turns blue.

                      sitesvS 1 Reply Last reply
                      0
                      • J.HilkJ J.Hilk

                        @sitesv there is no unchecked property (afaik)

                        use QPushButton { ... } and QPushButton:checked { ... } as identifiers

                        sitesvS Offline
                        sitesvS Offline
                        sitesv
                        wrote on last edited by sitesv
                        #10

                        @J-Hilk

                        b4->setStyleSheet("QPushButton { qproperty-icon: url(:/icons/icons/eth_play.png); } QPushButton:checked { qproperty-icon: url(:/icons/icons/eth_pause.png); }");
                        

                        doesn't work. No any icon on pushbutton shows...

                        b4->setStyleSheet("QPushButton { qproperty-icon: url(:/icons/icons/eth_play.png); }");
                        

                        This icon is displayed fine

                        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