LMD-Tools Font Image List Guide


Font Image List


TLMDFontImageList component provides the ability to use modern symbol icons in a VCL Delphi application. Symbol icons are 32-bit single color icons with transparency and anti-aliasing support produced by drawing a symbol from a special icons font. Due to the fact that the component stores only icon symbol codes, dfm file size is greatly reduced comparing to traditional bitmap based image lists.

 

The component descends from the standard Delphi TCustomImageList, and can be used with a lot of standard and third-party VCL controls. Usually controls provide Images property, which allows to link the control to the image list, as well as ImageIndex property for specifying the index of an image from the linked list. Following are some examples of controls, which can be connected to TLMDFontImageList component:

 

TToolBar

TMainMenu, TPopupMenu

TButton, TSpeedButton

TListView, TTreeView

etc.

 

Using font image list

 

The component can be placed on a VCL form Delphi Palette view:

 

clip0007

 

The icon font can be specified using image list's FontName property. By default, Segoe MDL2 Assets font, which is the default Windows 10 icon font, is used. See supported fonts section for other possible options.

 

Font image list does not automatically represent all images from the specified icon font. Instead, required images should be selected using the component editor. To show image list editor, double click on the image list component or select 'Images' item in the component context menu. As well, the editor can be shown by double clicking on the Images property in the Delphi's Object Inspector.

 

clip0009

 

To add new image to the list click on the add button at the top-left corner. The image item editing dialog will appear.

 

clip0010

 

The dialog allows to select the icon from the icons contained in selected font. Known icon code-points are shown in the list view; double clicking the icon will select it and show in the preview section at the top.

 

clip0012

 

Alternatively, the icon hex code can be directly typed in the Symbol field. The most useful way, however, is to type the supposed icon name in Symbol field instead of exact hex code. In this case the known icon list will be filtered accordingly.

 

clip0011

 

Similarly to the ordinal font characters symbol icons can be drawn in any color and any size. Changing the size (Width or Height) or Color properties recreates internal images on-the-fly.

 

clip0008

 

The Margin property provides a simple way to add an empty space around the icon. The actual size of the drawing inside the icon is determined as Min(Width, Height) - 2 * Margin. Margins are used to regulate the density of UI elements, and allow to provide a  kind of "air" feeling to the user. A lot of Delphi controls, like TToolBar, TMenu or TListView use icons size to calculate its own items size.

 

The following example shows an auto-sized toolbar with identical icons drawing size, but different margin:

 

clip0014 clip0015

 

Same for menus:

 

clip0016 clip0017

 

The default icons color can be specified using image list's Color property. However, each icon item can override it by providing its own color. This can be done via clicking on an item in the image list editor and changing its Color property in Delphi's Object Inspector. Alternatively the color can be changed in item editing dialog, which can be shown by double clicking on an existing item in the image list editor.

 

clip0013

 

Disabled images support

 

TCustomImageList class specifies the requirement to support drawing of contained images in a special disabled style. However, in Delphi, different VCL controls supports disabled images state differently:

 

Some Delphi controls like TButton, TSpeedButton or TMenu use the functionality of the TCustomImageList and thus, the image list itself determines how disabled image state should look like. For this scenario the component provides DisabledStyle and DisabledAlpha properties.

 

clip0018

 

Some other controls, like TToolBar or TButton provides additional properties to link to a distinct image list with disabled images. This scenario is supported by image list replicas, which allow to specify any required color.

 

clip0019

 

High DPI support

 

Font image list can change its size (Width and Height) properties on-the-fly, which makes it well suited for high DPI environments. Specifically, the component provides automatic DPI rescaling. Since the DPI scale factor is determined for each form separately in Per Monitor V2 scaling mode, the component need to be placed directly on a form for automatic DPI rescaling. Font image lists placed on a dedicated data module will not rescale.

 

Automatic rescaling can be disabled by setting Scaled property to False.

 

VCL styles recoloring

 

Font image list provide the ability to automatically recolor icons to colors, compatible with the current VCL Style. The feature works only with system colors such as clWindowText or clHighlight. Only global VCL Style setting is considered; per-control VCL Styles are not supported.

 

Automatic recoloring can be disabled by excluding fseSystemColors element from the StyleElements set property.

 

Advanced functionality

 

The font image list component allows to create secondary replica image lists, with the same content as the main parent image list, but different size or colors. Replica image lists are supposed to be used as sources of disabled or hot icons in control, which provides the corresponding support, such as TToolBar or TButton. Please follow the Font Image List Replicas topic for more info.

 

Any icon font can be used in the font image list, including standard fonts, such as Segoe MDL2 Assets (Windows 10), Segoe Fluent Icons (Windows 11), Google material icon fonts, Font Awesome and more. Even the custom fonts usage is possible. Look at Font Collection topic to learn how to use custom icon fonts.