Icon Class Reference

Displays an icon from the Material Design icon collection, the platform's icon theme, or another (local or remote) location. More...

Inheritance diagram for Icon:

Collaboration diagram for Icon:

Detailed Description

Displays an icon from the Material Design icon collection, the platform's icon theme, or another (local or remote) location.

To use an icon from the Material Design icon collection, set the name property to the name of the icon in its group in the form of group/icon_name. For example:

Icon {
    name: "action/settings"
}

This icon will by default use the light icon color from Material Design. To use the dark icon color:

Icon {
    Material.theme: Material.Dark
 
    name: "action/settings"
}

In addition to using icons from Material Design, you can also use icons from the platform's Freedesktop icon theme. For example:

Icon {
    name: "gimp"
}

By default, icons from the Freedesktop icon theme are not colorized unless they include the word "symbolic" in the icon name. For example, "gimp" would be full-colored by "edit-cut-symbolic" would be colored using the set color property (based off of Material.theme). If you need to colorize an icon manually, you can do so like this:

Icon {
    name: "gimp"
    colorize: true
}

You can also use custom icons like this:

Icon {
    source: Qt.resolvedUrl("icons/fun_icon.png")
}

---

The documentation for this class was generated from the following file:

• /home/runner/work/docs/docs/fluid/src/imports/controls/qml/Icon.qml