AnsweredAssumed Answered

Using Icon Font glyph in ImageButton

Question asked by les.vegetables on Jun 28, 2019
Latest reply on Jul 3, 2019 by les.vegetables

New to AppStudio. New to Qt. New to ArcGIS. Pardon my ignorance. I did search the internets before asking but didn't find any examples.


Consider the following from the AppStudio Font Awesomized Icons sample app:


import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

import ArcGIS.AppFramework 1.0
import ArcGIS.AppFramework.Controls 1.0
import ArcGIS.AppFramework.SecureStorage 1.0

import "controls" as Controls

App {
    id: app
    width: 400
    height: 750

    function units(value) {
        return AppFramework.displayScaleFactor * value

    property real scaleFactor: AppFramework.displayScaleFactor
    property int baseFontSize :"baseFontSize", 15 * scaleFactor) + (isSmallScreen ? 0 : 3)
    property bool isSmallScreen: (width || height) < units(400)
    property color iconColor: "#4C4C4C"

    QtObject {
        id: fa
        readonly property string  settings: "\uf013"
        readonly property string  home: "\uf015"
        readonly property string  email: "\uf0e0"
        readonly property string  gps: "\uf124"
        readonly property string  inbox: "\uf01c"

        anchors.fill: parent
        header: ToolBar{
            width: parent.width
            height: 50 * scaleFactor
            Material.background: "#8f499c"

        // sample starts here -----
        contentItem: Rectangle{

            FontLoader {
                id: fontAwesome
                source: "assets/fontawesome-webfont.ttf"

            ColumnLayout {
                anchors.horizontalCenter: parent.horizontalCenter

                RowLayout {
                    Layout.fillWidth: true
                    Layout.preferredHeight:app. height/3 * scaleFactor
                    spacing: 40 *scaleFactor
                    anchors.horizontalCenter: parent.horizontalCenter

                    //Add a Font Awesome Twitter icon by creating a Text element
                    Text {
                        text: "\uf099"
                        font.pixelSize: 35 *scaleFactor
                        color: "#1DA1F2"


Pretty straight forward. Reference the icon-font in a FontLoader object then reference the icons you want by their unicode value within the font.


Next, consider the following from the same example app.


import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1

import ArcGIS.AppFramework 1.0
import ArcGIS.AppFramework.Controls 1.0

    anchors.fill: parent

        Layout.preferredWidth: 50*scaleFactor

    Text {
        font.pixelSize: app.baseFontSize * 1.1
        font.bold: true
        wrapMode: Text.Wrap
        elide: Text.ElideRight
            verticalCenter: parent.verticalCenter

        Layout.alignment: Qt.AlignRight
        Layout.preferredWidth: 50*scaleFactor

        ImageButton {
            source: "../assets/info.png"
            height: 30 * scaleFactor
            width: 30 * scaleFactor
            checkedColor : "transparent"
            pressedColor : "transparent"
            hoverColor : "transparent"
            glowColor : "transparent"
            anchors {
                centerIn: parent
            onClicked: {
                descPage.visible = 1


Okay, strange. We've got an icon font loaded into our app. Why in the world would we use a png for an ImageButton when we have an icon font that could have a vector-based glyph in it that would scale nicely and allow us to set the icon color via a simple property assignment.


Question: I want to use an icon font for all of my apps icons, including those on buttons. Can someone provide an example of how to do that? I tried looking up the documentation on ImageButton to see if there were any properties I could use, but all I could find documentation for what the Button type, not ImageButton. F1 doesn't bring up any documentation on ImageButton either.


Thanks in advance.