Usage (VCL)

Usage of the VCL component

Define component at design-time

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 and the MaskColor.

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 IconName is optional but can help you reading the dfm, in version control operation or to obtain ImageIndex of the Icon by name.

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

Notice that if you set True to StoreBitmap, then the Icons are stored directly into dfm so the component don't need to rebuild Icons from Collection definitions.

If you leave StoreBitmap* false, the dfm contains only Collection definitions.

  object IconFontsImageList: TIconFontsImageList
    IconFontItems = <
      item
        FontIconDec = 983044
        IconName = 'account'
      end
      item
        FontIconDec = 983476
        FontColor = clMaroon
        IconName = 'delete'
      end
      item
        FontIconDec = 983085
        IconName = 'amazon'
      end
      item
        FontIconDec = 983727
        IconName = 'google-chrome'
      end
      item
        FontIconDec = 983090
        FontColor = clTeal
        IconName = 'android'
      end
      item
        FontIconDec = 985906
        IconName = 'file-replace'
      end
      item
        FontIconDec = 983062
        IconName = 'account-search'
      end
      item
        FontIconDec = 984024
        IconName = 'palette'
      end
      item
        FontIconDec = 984790
        IconName = 'format-font'
      end>
    FontName = 'Material Design Icons Desktop'
    FontColor = clBlack
    MaskColor = clBtnFace
    Size = 32
    OnFontMissing = IconFontsImageListFontMissing
    Left = 368
    Top = 304
  end

Notice than the "delete" and the "android" Icons uses a specific color.

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

Discover the component properties and methods here

*StoreBitmap is available only from Delphi 10.3 version: in previous versions the component always stores the Bitmap into dfm.