Ionicons are beautifully crafted icons that can be used in web, iOS, Android, and desktop apps. If you are coming from web frameworks or just prefer them you might also want to use them in your QML applications.

QML is a declarative language that enables building fluid and performant user interfaces. It is a highly readable language that can be easily extended using C++ language. The beauty of it is in how readable the language is and how good it performs. If you want native performance and would like to support many platforms (Windows, Linux, MacOS, Android, iOS), you should look no further.

If you are interested in app development and QML and you somehow ended up in this article without QML knowledge, I would like to mention that QML was designed from the ground up for building user interface and this is noticeable from the get go:

import QtQuick 2.3                                                                                                                                                                                                 
import QtQuick.Controls 2.0
import QtQuick.Window 2.2

This creates and application that will load a random image from the internet. It will also show a busy indicator while image is loading. Even if you have never seen QML you can understand what is happening. And it also runs JavaScript!

I have been using it actively for more than 4 years developing highly complex interfaces and I still think it is one of the best languages to develop applications. If you want to learn more you can start with https://qmlbook.github.io

Ionicons

If you are a web developer there are two commonly used principles for using icons, SVG and Icon fonts and both are supported by Ionicons.

Icon fonts

Icon font usage in HTML is as simple as including Ionicon icons and then providing an icon class. We want the same for QML.

I have included a generation code as part of official Ionicons build process. This makes it possible to use Ionicons as:

import "ionicons.js" as Ionicons

ionicons.jsis not a regular library file but a special QML js file containing valid codes for Ionicons that can be used in QML. It can be found in dist directory after running npm install && npm run build as part of the regular build process after you have downloaded Ionicons from my repository. ionicons.ttf is a regular Ionicons font file that can be found in dist/fonts directory. Don’t forget to add both ionicons.js and ionicons.ttf to qrc resource file and bundle as part of your app if you are planing to do a production deployment.

For full example and source code you can visit https://github.com/pkoretic/ionicons/tree/master/src/qml.

SVG

QML supports SVG images as part of Image element so inclusion of one icon is as simple as providing source path to the SVG image file location:

Image {
source: "ios-alert.svg"
}

However, there is now no property to change the color of the icon. To do that one can use ColorOverlay element:

import QtQuick 2.7
import QtGraphicalEffects 1.0

Wrapping up

Using icons like this in QML might be violation of DRY principle if you intend to use them in more than one place. Ideally we would want this to be one simple element where one can just specify name, size and color.

Using QML this gets to be very simple. Creating components is a common way to make your code better and maintainable.

For SVG version we can just wrap this in one component file.

Ionicon.qml

import QtQuick 2.7
import QtGraphicalEffects 1.0

Then the usage would be:

App.qml

Ionicon {
icon: "ios-alert"
color: "blue"
}

The size of the icon (image) is now directly related to the size of the Ionicon element which is actually an Image element since that is a root component. By default, Image fillMode is set to Image.Stretch which in turn will scale Image in all directions to fit the container. You might want to set this to Image.PreserveAspectFit for uniform scaling.

Note that all properties defined at the root component (Image) will be accessible as part of Ionicon properties. This might not be wanted so you would wrap this in an Item or FocusScope which solves focus handling (if you need that) and then we can expose only properties you think somebody should use.

For icon font version wrapping pattern is identical. The only difference is that we also include ionicons.js as part of the icon element. This could be moved to a global place but this is not a good partice. Luckily, we have marked ionicons.js with .pragma library which means that the file will be included only once and shared with all instances even if you have multiple Ionicon instances.
On the other hand, font loading should be done only once. This can be done as part of your global app setup or even from .cpp logic, depending on your usage.

Ionicon.qml

import QtQuick 2.7

App.qml

Ionicon {
icon: "md-alert"
color: "blue"
size: 100
}

Here we have added some more properties to showcase additional options. Sizing is done by the Text pixelSize property since this is what our Icon is, an Text element.

Without getting into more details in this supposed-to-be-simple-and-short-to-the-point article, there are obvious advantages and disadvantages to these two approaches and they are mostly shared with HTML.
You might like the simplicity of having all icons in one font file, although you might dislike this as well if you don’t use all the icons. The difference in QML is that you, normally, would not load the font file from the network but have it included as a part of your binary using QRC resource files. In that case there is no penalty for network access and icons are immediately available. This also makes SVG version appealing since you can then bundle just the icons you want and use them as easily. The difference is in the tiny details of the actual usage and deployment. When creating a custom component, those differences almost disappear. At least now you can easily choose which one you want to use.

Note that Quick Controls 2 have introduced built-in icon support. If you are already using Quick Controls 2 more info is available at the official page.

Do you use Ionicons in some other ways or you have some questions? Please do get in touch!

Developer by day, architect at night — never satisfied

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store