Usage (FMX)

Usage of the FMX components

In FMX there are two components: IconFontsImage and IconFontsImageList.

The IconFontsImageList component is very easy to use.

Before using it, remember to install the WebFont that contains the icons to use. Look at those ones for example:

material-design-icons

segoe-ui-symbol-font

Drop the component into your Form or Datamodule, and define the size of the Icons in pixel, the FontName, the FontColor IconName. You can also specify the Opacity.

Then fill the IconFontsItems collection with the characters used to build the Icons into the ImageList. If you don't specify FontName, FontColor, MaskColor the Icons will be generated using the default values of the IconFontsImageList. The

You easily do that also with * The Advanced Component Editor.

Notice that no bitmaps are stored into dfm but only the definitions to build them:

  object IconFontsImageList: TIconFontsImageList
    Source = <
      item
        MultiResBitmap.Height = 64
        MultiResBitmap.Width = 64
        MultiResBitmap.LoadSize = 0
        MultiResBitmap = <
          item
            Size = 113
          end>
        IconName = 'account'
        FontIconDec = 983044
        Opacity = 1.000000000000000000
      end
      item
        MultiResBitmap = <
          item
            Size = 96
          end>
        IconName = 'account-alert'
        FontIconDec = 983045
        FontColor = claRed
        Opacity = 1.000000000000000000
      end
      item
        MultiResBitmap = <
          item
            Size = 294
          end>
        IconName = 'account-check'
        FontIconDec = 983048
        Opacity = 1.000000000000000000
      end>
    Destination = <
      item
        Layers = <
          item
            Name = 'account'
            SourceRect.Right = 113.000000000000000000
            SourceRect.Bottom = 113.000000000000000000
          end>
      end
      item
        Layers = <
          item
            Name = 'account-alert'
            SourceRect.Right = 96.000000000000000000
            SourceRect.Bottom = 96.000000000000000000
          end>
      end
      item
        Layers = <
          item
            Name = 'account-check'
            SourceRect.Right = 294.000000000000000000
            SourceRect.Bottom = 294.000000000000000000
          end>
      end>
    FontName = 'Material Design Icons Desktop'
    FontColor = claBlack
    Opacity = 1.000000000000000000
    Left = 208
    Top = 144
  end

Notice than the "account-alert" Icon uses a specific color.

In the Demo supplied you can see the features in action...

Discover the component properties and methods here