Skip to main content
Skip table of contents

Adding and updating icons

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.ttfmdicons2.ttfmaticons.ttfafl/mod/fontsfinance/mod/fontsmdicons-finance.ttfmdicons2-finance.ttf.ttfhttps://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 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 these font files. For example, you can associate an icon with a workspace by defining the workspace with the following code:

SCHEME
<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.

XML
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:

SCHEME
<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.

Specifying tooltips for icons

When adding an icon to a table column, a list item, or a label, you can specify a tooltip. On desktop, users can see the tooltip by hovering over the icon. On mobile, users can see the tooltip by holding and pressing the icon.

To add a tooltip to an icon used as a column name, add the tooltips property to the column definition. For example:

SCHEME
<Column caption="ids.icon"  icons="template icon" name="colType" tooltips="colDescription"/>

In this example, colDescription is an attribute that is defined elsewhere.

To add a tooltip to an icon used with list items, add the tooltips property to the avatar definition. For example:

SCHEME
<Avatars codes="preferredStyle" icons="type icon" tooltips="addressFull"/>

In this example, addressFull is an attribute that is defined elsewhere.

If an icon is being used as a label, you can add a tooltip as long as the label does not also have a caption. To add a tooltip to an icon being used as a label, add the tooltip property to the label definition. For example:

SCHEME
<Label icon="ownerIcon" name="lblOwner" tooltip="&quot;ids.owner&quot;"/>

In this example, ids.owner is a string ID, for a string defined in a .strings file. The string ID must be enclosed in &quot; text. You can also reference string constants using the same format.

If a label contains both a caption property and an icon property, it does not display correctly in the interface. An empty or blank image is displayed next to the caption. To correct this situation, remove the icon property from the label definition. For example, if the label definition is the following:

SCHEME
<Label caption="&quot;ids.batchUpdateCustomField.customFieldNotUnique&quot;" icon="&quot;warning_high&quot;" multiline="true" name="lblCautionReplaceMsg11"/>


change it to the following:

SCHEME
<Label caption="&quot;ids.batchUpdateCustomField.customFieldNotUnique&quot;" multiline="true" name="lblCautionReplaceMsg11"/>


JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.