Overview

Icons are specified as text characters, not as image files.

The material design icons used in the product are a subset of icons available from Google Material Design font (https://material.io/resources/icons/) and the open-source Material Design Icons font (https://materialdesignicons.com/).
To view the exact contents of the .ttf files, you can use a font viewer tool such as https://fontdrop.info/ or http://torinak.com/font/lsfont.html.

For example, open the maticons.ttf file using the https://fontdrop.info/ online tool. The list of all characters included in the font is displayed. Scroll until you see the icon that you want to use. For example, the icon used for contacts is . When you hover or click the image, the Unicode number of E7FD is displayed. This is the number you can use when you refer to the icon.

If you want to use an icon which is not contained in these two files, you can include another font file in the afl/mod/fonts directory, and then refer to the names or Unicode code points when developing your application.

Including icons

There are two ways to include icons in the application.

Direct reference

Simply enter icon:backup or icon: in the icon property to refer to an icon included in those two font files. For example, you can associate an icon with a workspace by defining the workspace with the following code:

<Workspace caption="IDS_HOME" icon="icon:&#xE88A;">

Performance tip

To ensure optimal performance of the user interface, NexJ recommends that you use a direct reference to the icon whenever possible.

Store icons in a string file

In the icon.en.strings file, define your icons in the following format, using either the code point or the name.

ids.icon.lock=icon\:\uE897
ids.icon.user=icon:person_outline

The string ID should be a human-readable name that is meaningful in the context of the application. It is unrelated to either the code point of the name of the character in the font.

You can then refer to the string ID when you need to display an icon. For example, you can define the appearance of a composite label with the following code:

<Composite caption="ids.security" icon="lock" name="splitSecurity">

To change the icon, update the value in the strings file. You do not need to update each reference.