Icons

FMXER draws icons from the Material Design Icons font (5,918 glyphs, version 5.9.18) through a shared TIconFontsImageList. Icons are vector glyphs: they scale to any size and take any color.

The font file must be available at runtime: see The icon font.

IconFonts: the shared image list

Unit FMXER.IconFontsData. IconFonts returns a singleton data module (created on first use) with one TIconFontsImageList:

uses FMXER.IconFontsData;

var LIndex := IconFonts.AddIcon(IconFonts.MD.account, TAppColors.PrimaryColor);
// LIndex is an image index in IconFonts.ImageList

Member	Description
AddIcon(AIcon: TIconEntry[; AColor]): Integer	adds the icon to the image list, returns its index
AddIcon(ACodePoint: Integer[; AColor]): Integer	same, by code point
ImageList: TIconFontsImageList	the image list (assign it to TGlyph.Images, TListView.Images, ...)
MD: TMaterialDesign	the icon table, one property per icon

Without a color, AddIcon uses the image list's FontColor (black).

Each icon is added once per color: calling AddIcon again with the same icon and color returns the index of the image already in the list, so it is safe in code that runs many times — a route definition, a list builder.

Before v.1.2

Up to v.1.1 AddIcon added a new image at every call, and the list grew for the whole life of the app. On v.1.1 keep the indexes, as the LibraryStore demo does in Utils.UI:

function TUIUtils.GetBookImageIndex: Integer;
begin
  if FBookImageIndex = -1 then
    FBookImageIndex := IconFonts.AddIcon(IconFonts.MD.book, TAppColors.PrimaryColor);
  Result := FBookImageIndex;
end;

Icon entries

Unit Icons.MaterialDesign declares TMaterialDesign, a record with one TIconEntry per icon, named after the icon with _ instead of -: MD.account, MD.arrow_left, MD.qrcode_scan, MD.weather_sunny. Browse the names at pictogrammers.com (version 5.9 or older).

Unit Icons.Utils declares the types:

Type	Description
TIconEntry	name, codepoint, index, aliases; converts implicitly to Integer (code point) and string (name)
TIconCollection	a named set of entries, with ForEach, Contains(AName / ACodepoint), FindEntry(AName, out AEntry, ACaseInsensitive), FindEntry(ACodepoint, out AEntry)
TIconManager	TIconManager.Instance.Collections: the registered collections (Icons.MaterialDesign registers itself)

var LEntry: TIconEntry;
for var LCollection in TIconManager.Instance.Collections do
  if LCollection.FindEntry('rocket-launch', LEntry) then
    Glyph.SetIcon(LEntry);

Icons.MaterialDesign.pas and Icons.Utils.pas are generated by IconFontsImageListUtility, which can produce the same units for other icon fonts (the HelloWorld_IFIL demo also has a Font Awesome unit).

TIconFontsGlyphFrame

Unit FMXER.IconFontsGlyphFrame. A TGlyphFrame already bound to IconFonts.ImageList.

Accessory.SetLeftAsFrame<TIconFontsGlyphFrame>(50
, procedure (Glyph: TIconFontsGlyphFrame)
  begin
    Glyph
    .SetIcon(IconFonts.MD.qrcode_edit, TAppColors.PrimaryColor)
    .SetPadding(5);
  end
);

Member	Description
SetIcon(AIcon: TIconEntry)	adds the icon (default color) and shows it
SetIcon(AIcon: TIconEntry; AColor)	adds the icon in AColor and shows it
SetIcon(AImageIndex: Integer)	shows an image already in IconFonts.ImageList

Plus the members of TGlyphFrame, below.

TGlyphFrame

Unit FMXER.GlyphFrame. A TGlyph showing an image of any image list, clickable.

Member	Description
SetImages(AImageList) / GetImages	the image list
SetImageIndex(AIndex) / GetImageIndex	the image
SetOnClickProc(TProc) / GetOnClickProc	click handler; the frame is clickable only when one is set

Icons in other elements

• Scaffold action buttons: AddActionButton(IconFonts.MD.close, TAppColors.PrimaryTextColor, procedure begin ... end) — see Scaffold.
• List items: TListViewFrame uses IconFonts.ImageList as ListView.Images unless you assign another list; pass the index to AddItem.