What is the best practice around using icons in the application?

Best Practice
1

What is the best practice around using icons in the application?

2

We create a lookup object for our apps, this enables changing the related icon later on a breeze. We link an icon to a tangible reference, such as add to use in the app, essentially creating an alias for our icons. 

var ICONS = { 
  // Keep alphabetical
  "add": "fa-plus-circle",
  "cancel": "fa-times-circle",
  "checked": "fa-check-square",
  "clock": "fa-clock",
  "confirm": "fa-check-circle",
  "edit": "fa-edit",
  "toggle_on": "fa-toggle-on",
  "toggle_off": "fa-toggle-off",
  "unlock": "fa-unlock",
  "user": "fa-user",
  "users": "fa-user-friends",
  "unchecked": "fa-square",
  "upload": "fa-upload",
};

/**
* Icon functionality
*   - All icons are assigned in the ICONS object
*   - Shared function below the object calls desired icon in app
*   - Ensures consistency across views, when modifying and icon only need to change in one place
*/
function Icon(name) {
    if (ICONS[name]) return ICONS[name];
    else return """";
}

In your XML you can then add the icon as follows:

<button label="Add Item" icon="{$:Icon('add')}" on-press="add()" />

Note that the Icon is between the {} brackets.

5 Likes