⭐ Icons

Qaterial automatically package all svg icons from MaterialDesignIcons.

Path is qrc:/Qaterial/Icons/<icon>.svg. For easy access, Qaterial also comes with a singleton Icons that provide a property for each svg files.

Example:

import QtQuick
import Qaterial as Qaterial
Row
{
    Qaterial.Button { icon.source: Qaterial.Icons.add }
    Qaterial.Button { icon.source: 'qrc:/Qaterial/Icons/alert-circle.svg' }
}

Find Icons

In file qml/Icons.qml all available icons are listed. A convenient example IconsListView is also available to filter and search in the list.

QaterialOnline

Icon Component

A Simple Icon component display an icon with a color.

import Qaterial as Qaterial

Qaterial.Icon
{
 icon: Qaterial.Icons.rocketLaunchOutline
    size: 32
    color: "#FF9800"
}

Properties

• icon: Path to the icon.
• size: Size of the icon, automatically set width & height. Width & height can be set to different value is required.
• color: Color of the icon. Default to primary text color.

How to filter icons

By default all svg from MaterialDesignIcons are package in Qaterial (take 3-4Mb). To filter which icons are going to be embedded use the CMake argument QATERIAL_ICONS.

This example demonstrate how to embed only icons starting with ab, account, and that contains outline

cmake -DQATERIAL_ICONS="ab*;account*;*outline*" ..

By default QATERIAL_ICONS is equals to "*.svg".