How do I move the text inside the icon in a QPushButton?

Question

I have created custom PyQt5 buttons that have an SVG icon. I to have clickable hexagons with text inside them. However, when I try to move the text to the left, it is hidden by the hexagon.

I have tried moving the text to the left using padding, but this just hides the text.

HexButton code:

class HexButton(QPushButton):
    def __init__(self, colour, parent=None):
        super(QPushButton, self).__init__(parent)

        # Convert hexagon svg into image
        qimage = QtGui.QImage.fromData(self.svg_hexagon(colour))
        qicon = QtGui.QPixmap(qimage)
        # Set the icon as the hexagon
        self.setIcon(QtGui.QIcon(qicon))
        # Set icon size as the entire thing
        self.setIconSize(QSize(48, 48))
        # Make the button invisible
        self.setStyleSheet("""
        border: none;""")


    def svg_hexagon(self, colour):
        svg_bytes = f'<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31"><path stroke="none" fill="{COLOURS[colour]}" d="M12.5 1.2320508075689a6 6 0 0 1 6 0l7.856406460551 4.5358983848622a6 6 0 0 1 3 5.1961524227066l0 9.0717967697245a6 6 0 0 1 -3 5.1961524227066l-7.856406460551 4.5358983848622a6 6 0 0 1 -6 0l-7.856406460551 -4.5358983848623a6 6 0 0 1 -3 -5.1961524227066l0 -9.0717967697245a6 6 0 0 1 3 -5.1961524227066"></path></svg>'
        return bytearray(svg_bytes, encoding='utf-8')

MainApplication

def main():

    app = QApplication(sys.argv)
    window = QWidget()
    layout = QHBoxLayout(window)

    button = HexButton("blank")
    button.setText("Nice")
    button.move(10, 10)
    layout.addWidget(button)

    window.show()
    sys.exit(app.exec_())

I expect a yellow hexagon with text inside.

Answer 1

Unfortunately, the icon and text are painted on the same layer, and the icon is painted after the text causing the problem you are pointing out. Considering the above a possible solution is to create a QLabel above the button:

from PyQt5 import QtCore, QtGui, QtWidgets


class HexButton(QtWidgets.QPushButton):
   def __init__(self, colour, parent=None):
       super(HexButton, self).__init__(parent)

       # Convert hexagon svg into image
       qimage = QtGui.QImage.fromData(self.svg_hexagon(colour))
       qicon = QtGui.QPixmap(qimage)
       # Set the icon as the hexagon
       self.setIcon(QtGui.QIcon(qicon))
       # Set icon size as the entire thing
       self.setIconSize(QtCore.QSize(48, 48))
       # Make the button invisible
       self.setStyleSheet(
           """
       border: none;"""
       )
       self.text_label = QtWidgets.QLabel()
       self.text_label.setContentsMargins(0, 0, 0, 0)
       self.text_label.setStyleSheet("""color : white;""")
       lay = QtWidgets.QVBoxLayout(self)
       lay.addWidget(self.text_label, alignment=QtCore.Qt.AlignCenter)

   def svg_hexagon(self, colour):
       svg_bytes = f'<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31"><path stroke="none" fill="{colour.name()}" d="M12.5 1.2320508075689a6 6 0 0 1 6 0l7.856406460551 4.5358983848622a6 6 0 0 1 3 5.1961524227066l0 9.0717967697245a6 6 0 0 1 -3 5.1961524227066l-7.856406460551 4.5358983848622a6 6 0 0 1 -6 0l-7.856406460551 -4.5358983848623a6 6 0 0 1 -3 -5.1961524227066l0 -9.0717967697245a6 6 0 0 1 3 -5.1961524227066"></path></svg>'
       return bytearray(svg_bytes, encoding="utf-8")

   @property
   def text(self):
       return self.text_label.text()

   @text.setter
   def text(self, t):
       self.text_label.setText(t)


def main():
   import sys

   app = QtWidgets.QApplication(sys.argv)
   window = QtWidgets.QWidget()
   layout = QtWidgets.QHBoxLayout(window)

   button = HexButton(QtGui.QColor("black"))
   button.text = "Nice"
   layout.addWidget(button)

   window.show()
   sys.exit(app.exec_())


if __name__ == "__main__":
   main()