Icons can be used for nodes as well. This example shows icons from Font Awesome and Ionicons but it should work with similar packages as well. It uses Unicode and CSS to define the icons. It's also possible to use multiple different icon fonts within the same network (e.g. the icon.face property can be "'Ionicons'" for one node but "'FontAwesome'").

Typing icons in code

It's possible to either use Unicode escapes ("\uXXXX") or directly input the characters into the source code. Each method has it's pros and cons briefly described bellow.

Escapes

Unicode characters (icons in this case) can be written using escapes in pure ASCII. There is no chance of encoding issues and they'll generally be easier to read and write in code. However escaping may be a bit tricky at times, you may need pairs of escape sequences or multiple layers of escaping depending on what icons use use and how you process the text respectively.

• For basic plane characters simply prefix them with \u: Unicode F274 ⇔ "\uF274".
• For supplementary plane characters use two escapes (surrogate pair): Unicode F0785 ⇔ "\uDB81\uDF85".

UTF

It's also possible to type the icon characters directly into the source code (using control+shift+u, copy-pasting, symbol tables or other Unicode character input methods available on your system). You'll avoid issues with escaping. If the encoding is declared properly, then encoding issues are unlikely nowadays but still possible. Though this doesn't make issues any more likely if you're already using UTF for accented letters etc. It's unlikely though that your editor will render these characters in a readable way.

Troubleshooting

If a node is shown as a rectangle, it means the CSS or the font is not loaded (or not yet loaded). A redraw after the font and it's CSS was loaded will fix that.

Some fonts require specific font weight to be set. You can see this being set for Font Awesome 5 in this example. Check the CSS that came with your icon font or just experiment with font weight.

Single icon may use multiple characters (1 or 2 in case of UTF, at least 6 with escapes). This makes methods such as .slice() unreliable and quite dangerous. Carelessness can lead to issues with broken icons etc. (you split the escape sequence or surrogate pair). If you process the icon characters in any way, you just have to be very careful.

Font Awesome 4

Font Awesome 5

Ionicons