Liri Fluid API

Icon QML Type

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

Import Statement: import Fluid.Controls 1.1


Detailed Description

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")

Property Documentation

cache : bool

Specifies whether the image should be cached. The default value is true.

Setting cache to false is useful when dealing with large images, to make sure that they aren't cached at the expense of small 'ui element' images.

color : color

The color of the icon. Defaults to Material.iconColor.

colorize : bool

Set to false if you want the icon to use the original image's colors and not be colored using the specified color.

name : string

The name of the icon to display.

See also Fluid.Controls::Icon::source.

size : real

The size of the icon. Defaults to 24px.

source : url

A URL pointing to an image to display as the icon.

By default, this is a special URL representing the icon named by name from the Material Design icon collection when using the form of "collection/icon_name", or in the case of a single "icon_name", the platform's Freedesktop icon theme will be used.

By default, icons from the Material Design icons collection will be treated as symbolic icons and colored using the specified color, while icons from the Freedesktop icon theme will not be colorized. To override this, or set the behavior for your own custom icons, use colorize.

See also Fluid.Controls::Icon::name.

[read-only] sourceSize : real

Source image size.

status : enumeration

  • Image.Null - no image has been set
  • Image.Ready - the image has been loaded
  • Image.Loading - the image is currently being loaded
  • Image.Error - an error occurred while loading the image

[read-only] valid : bool

true if the icon is valid and fully loaded.