insert_emoticon Icons available in Touch UI applications

Applications created with Code On Time utilize Material icons provided by Google under the Apache License Version 2.0.

Bootstrap includes Glyphicons from http://glyphicons.com/.

Material Icon List open_in_new Glyphicon List Ionicons List Font Awesome Icon List


Using Icons on Actions, Views, and Pages

Add an icon to a data controller action by specifying the icon set plus the icon name in the "Icon" property. Assign an icon to view by using the icon set + icon name in the "Tags" property. Separate words with dashes.

For example, to use the "lock open" icon from the Material Icon set, use the following value:

material-icon-lock-open

Using Material Icons in Custom Content

Assign the "material-icon" class to any element, and use the icon name as the contents. Separate words with underscore "_".

<i class="material-icon">lock_open</i>

The example above results in the following:

lock_open

Here are some useful sample icons:

Icon Name Icon Icon Name Icon
check check keyboard arrow down keyboard_arrow_down
add add keyboard arrow up keyboard_arrow_up
close close keyboard arrow left keyboard_arrow_left
undo undo keyboard arrow right keyboard_arrow_right
send send local phone local_phone
refresh refresh file download file_download
Material Icon List open_in_new

Glyphs available in Touch UI and Desktop applications

Add the class "glyphicon glyphicon-" to the icon name to reference icon image.

To use a glyphicon on an action, view, or page, add a tag to the item with the following format:

glyphicon-ok

To use glyphicons in custom HTML content, use the following to create a word with a glyph to the left:

<span class="glyphicon glyphicon-ok"></span>

The result can be seen below:

List of glyphicons available here.


Integrating External Icon Libraries

It is also possible to extend the app to use additional icon libraries. Currently, Ionicons and Font Awesome icons are supported.

Easy Way:

Create a custom CSS file under the "~/touch" folder of your project. Replace the contents with the following:

/*Font Awesome icons*/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/*Ionicons*/
@import url('http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
Download the required CSS and icon files and extract them under "~/touch" folder of your project.

Once the step above has been completed, use the relevant icons on actions and views by specifying the icon set name and icon name in the "Tag" property of the item. Use dashes to separate words. See examples below.

ion-android-arrow-forward
fa-arrow-right

To use the icons on custom content pages, consult the respective documentation for each library.

<i class="ion-android-arrow-forward"></i>
<br/>
<i class="fa fa-arrow-right"></i>

Sample can be seen below:


Ionicons List Font Awesome Icon List

Glyphicon List