Specifying the icon of ToolButton using the text property

Question

In the built-in template of stack-view Qt quick application, the toolbutton is defined by:

    ToolButton {
        id: toolButton
        text: stackView.depth > 1 ? "\u25C0" : "\u2630"
        font.pixelSize: Qt.application.font.pixelSize * 1.6
        onClicked: {
            if (stackView.depth > 1) {
                stackView.pop()
            } else {
                drawer.open()
            }
        }
    }

which use "text" member to specify unicode character "\u25C0" as icon. Why use "text" instead of "icon"? Is there any advantage?

Is there a complete list of such unicode in Qt? I've tried http://www.unicode.org/charts but it's not always helpful. In the texteditor example there's another unicode character "\uE800" which marked as "icon-bold", but when I look it up in http://www.unicode.org/charts it's marked as "Private Use Area" and no list is provided.

Thank you!

Answer 1

Why use "text" instead of "icon"? Is there any advantage?

Advantages:

• You don't need to provide icon images.

  Applications can be run on any number of different displays, each with different DPI, etc. This means that if you're using bitmap (e.g. PNG) assets and not vector (e.g. SVG) assets, you end up needing to provide a lot of assets if you target high DPI displays. For example, to target displays with a device pixel ratio of up to 4:

  • pause-icon.png
  • pause-icon@2x.png
  • pause-icon@3x.png
  • pause-icon@4x.png

  Most applications (e.g. Sketch) have support for exporting at various scale factors, which makes this a lot easier, but if your target device is restricted in terms of memory (as with embedded devices) you also need to consider how much these extra assets increase the size of the deployed application.

  By using text, you get smooth scaling for free.

• It automatically uses the font colour of the current style.

  Before Qt 5.10, you'd need to ensure that the colour of the icon is correct for each style the application will be run with. To see an example of this, compare the images here. The Material style needs its own assets because of the colours that it uses, otherwise some icons would be e.g. dark on a dark background.

  This means the list of assets above just grew in size, depending on how many styles the application supports. For most applications, this won't be so much of an issue, because they typically come with one predefined style.

  However, as of Qt 5.10, AbstractButton has an icon.color property that you can use to colourise icons with, and it uses the same colour as the font colour, meaning that you don't need to provide these extra colour/style-specific assets. So this point is moot with 5.10.

Disadvantages:

• When not using a specific font (as seen in the stack template), the icon could end up looking different than what you had in mind.

  In this case, the font will be rendered in whatever font the application happens to be running with. This leaves your icons at the mercy of the user's environment; what was a nice back arrow could look different (e.g. too thin) than intended.

---

In the case of Creator, the options at the time the templates were created were:

1. Use Unicode characters without specifying a font and avoid having to:
   • Bundle e.g. FontAwesome with every user's new application, but be at the mercy of the font rendering.
   • Provide a large set of DPI variants of the assets to account for all displays that could potentially run the application.
2. Ship FontAwesome.
3. Provide bitmap icons, ensuring that style/colour-specific variants are available in case the application is run with a different style.

Now that 5.10 is out, #3 could perhaps be the better option.

Is there a complete list of such unicode in Qt?

No, you need to use a site like you mentioned.

In the texteditor example there's another unicode character "\uE800" which marked as "icon-bold", but when I look it up in http://www.unicode.org/charts it's marked as "Private Use Area" and no list is provided.

The Text Editor example uses FontAwesome via fontello, which is a site that lets you pick specific FontAwesome characters to put into a minimal font file. The font file is here.

The Unicode characters you see in this example are FontAwesome-specific.