Icon QML Type | Fluid Reference Documentation

- Fluid Reference Documentation
- Fluid 1.2.0

# 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

- List of all members, including inherited members

## Properties

- cache : bool
- color : color
- colorize : bool
- name : string
- size : real
- source : url
- sourceSize : real
- status : enumeration
- valid : bool

## 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.