Adding and updating icons
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/).
mdicons.ttf
maticons.ttf
afl/mod/fonts
.ttf
https://fontdrop.info/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:">
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.