Font Icons on Smart Devices

In order to use any font icon, the user must create a theme class that applies the desired font, and then pass the icon's "encoded code" to the UI control where it will be displayed.

To simplify this, SmartDevicesPlus provides classes and procedures that help the developers include Font Icons in their Smart Devices application.

Currently, 2 types of "Font Icons" are supported, "Font Awesome 5 Free" and "Material Icons", but the mechanism can easily be extended with any other type of font icons that the user can find.

Please check the official websites

  • https://fontawesome.com
  • https://material.io/resources/icons/

Using the icons

To use any icon, the user must first create the desired UI element (Textblock, Attribute, Button, etc) and assign one od the theme classes provided by SmartDevicesPlus.

Then, the user must encode the icon "code" using the procedure "SDPlusBaseObjects.SDPGetUnicodeFromHex()", and the result must be assigned to the UI Control's caption property.

e.g.:

Let's select an icon from the "Font Awesome" library.

wwpsd_editor_fonticon_cheetsheet1

Then, create a "Textblock" or a "Button", and assign the classes

wwpsd_editor_fonticon_sample1

And finally, in the "start" event, encode the selected icon "f1c5", using SmartDevicesPlus API

Event Start
    // Icon in Label 
    FontIconLabel.Caption = SDPlusBaseObjects.SDPGetUnicodeFromHex(!"f1c5")    
    // Icon in button 
    FontIconButton.Caption = SDPlusBaseObjects.SDPGetUnicodeFromHex(!"f1c5")
Endevent

You can see the result here:

Image:wwpsd_editor_fonticon_sampleresult?

Default theme classes

SmartDevicesPlus provides the following classes that can be used or sub-classed:

Attribute

  • IconAttributeFontAwesome
  • MenuIconFontAwesome
  • IconAttributeMaterial
  • MenuIconMaterial

Button

  • ButtonFontAwesome
  • ButtonMaterialIcon

TabPage

  • TabPageFontAwesome
  • TabPageFontAwesomeSelected
  • TabPageMaterialIcon
  • TabPageMaterialIconSelected

TextBlock

  • IconFontAwesome
  • IconMaterial