"image" stylesheet property does not display the image when appplied on a QToolButton

Question

When I set a QToolButton's image to a resource file in stylesheet, it fails — no icon image showed after running:

QToolButton#example[state="checked"]
{
  image: url(:/images/checked.png);
}

However, If I modify a bit of the stylesheet like the following (the rest is the same):

QToolButton#example[state="checked"]
{
  qproperty-icon: url(:/images/checked.png);
}

It succeeds.

Is the image property not supported? That is the example case from the official site. Or did I just misuse it?

Answer 1

image property is supported, however, the documentation says (my emphasis):

This property is for subcontrols only–we don't support it for other elements.

It seems to work for a QPushButton under KDE, but that is not a general rule. Using that combination is to be avoided based on what documentation mentions.

Also, from QToolButton's documentation (my emphasis):

A tool button is a special button that provides quick-access to specific commands or options. As opposed to a normal command button, a tool button usually doesn't show a text label, but shows an icon instead.
...
A tool button's icon is set as QIcon.
...
The button's look and dimension is adjustable with setToolButtonStyle() and setIconSize().

A QToolButton is meant to have an icon, not a background image. You can see how many methods it has about customizing its icon, and how its size is based on that.

Also, all of its styles allow it to either have an icon, text, or both.

So trying to use:

image: url(:/images/checked.png);

as its stylesheet, does not work, and should not work for anything other than sub-controls.

As a guess, this behavior might be caused by the fact that the image property sets the button's size implicitly, because if you use background-image, it will work, but only if you set height and width to the used image's size.

So don't use image, and instead, use qproperty-icon as you've already figured out.