icons

JourneyApps supports icons from various sources to be used in UI components:

1. App Assets

2. Font Awesome library

3. Ionicons library

4. attachment fields/variables

App Assets

You can upload icon assets to your app via OXIDE, and reference them directly in UI component's icon attribute. Head over to the Assets workspace in OXIDE to upload icon files.

Font Awesome library

These icons are prepended with fa-. See an example below:

<button label="Add New User" icon="fa-plus-circle" on-press="$:addUser()" validate="false" />

Font Awesome version compatibility:

JourneyApps container version	Font Awesome version
4.34.9+	5.0.13
4.33.3+	5.0.7

Ionicons library

These icons are prepended with ion-. See an example below:

<button label="Add New User" icon="ion-ios-add" on-press="$:addUser()" validate="false" />

Ionicons version compatibility:

JourneyApps container version	Ionicons version
4.0.0+	2.0.1

attachment fields/variables

Since JourneyApps Runtime version 4.90.4 you can use attachment variables/fields with images to populate icons in your apps. For example:

<!-- main.view.xml -->
<var name="my_icon" type="attachment" media="image/png" />

<button label="Click me!" icon="{my_icon}" on-press="$:doSomething()"/>

Developing with icons in OXIDE

With the Icons panel in OXIDE, developers can browse and search all available icons from the Font Awasome or Ionicons libraries. The Icons panel includes a preview of each icon, and you can enlarge the icon preview using the Large icons button. Use the dropdown inside the panel to switch between Font Awesome and Ionicons icon sets. When you found an icon that you want to use, click on it to copy its name.