How to Add New Icons to your OutSystems Apps using existing Icon Fonts
The most practical and efficient way to create and maintain icons in OutSystems applications is to use a single, existing Icon Font as a starting point.
This way, we will guarantee:
Increased maintainability - a single file contains all the icons;
Our library has no duplicates;
Standardized icon naming.
What are Icon Fonts?
Before we go any further, what are Icon Fonts really all about? Icon fonts use symbols and glyphs rather than letters, punctuation, and numbers. Using an icon font instead of actual images as icons allows changing the size, color, and shape with ease. Furthermore, as typical fonts, they can be on any color or background, and their strokes or opacity can be altered.
The icons are altered with CSS, which is excellent for keeping your apps lightweight - further making your icons easy to maintain while keeping your app’s UI congruent.
Updating an Icon Font
Now that we know what Icon Fonts are, let's reuse an existing icon font in an OutSystems application to add more icons.
We want to use a new "Play" icon in our app. Assuming we have an SVG (Scalable Vector Graphic) file called "play-circle.SVG", we will include it in an existing font called "trove-icon":
1
Open the OutSystems module where the trove-icon SVG file lies. Right-click the SVG file and select “Save Resource As”, and save the file locally.
2
To demonstrate how to add a new icon to the Icon Font, we will be using the Icomoon App. However, use whatever app you are more comfortable with as long as it allows you to append a new icon to an existing font as described in this guide. Go to the website Icomoon App.
3
On the top left corner of the page, click on “Import Icons”.
4
Select the SVG file previously downloaded. The app will now look something like the image below, showcasing the icons already in the file.
5
Click the more actions on the font “trove-icon” header and select "Import to Set".
6
Pick the file “play-circle.svg”, and the new icon will be added to the existing ones.
7
Click “Select All” and then “Generate Font”.
8
In the next step, make sure your Icon Font keeps the same name ("trove-icon.SVG") as before under settings. Additionally, confirm that the codes and names for each icon don't conflict with the already existing ones.
9
Your updated Icon Font is ready. Download the font, and you will get a compressed file containing all the fonts' files. Extract it and replace the fonts on the OutSystems modules. I usually delete the existing ones. In this case, we would delete all files listed on the folder in step 1. In this step, OutSystems ServiceStudio should say that you have some errors. Ignore them for now.
10
Add the fonts under the folder fonts of the extracted folder to the OutSystems directory. Once you add them and change the attribute “Deploy Action” to “Deploy to Target Directory”, the previous errors should now be cleared out.
11
Open the CSS file where you are using the fonts. In our example, I searched for "trove-icon" and got the stylesheet using the Icon Font. We will need to add the new icon: create the CSS class "trove-icon-play_circle_filled" like shown in the image.
Icon Fonts are incredibly versatile and allow the addition of graphical elements to web apps seamlessly. Their look-and-feel can be easily changed to match the app's UI through CSSs, making them quite efficient and fast-loading. However, it is easy to go overboard and add too many, and sometimes duplicated, icon fonts to apps because of their simplicity. Following the basic rules stated at the beginning of this how-to will guarantee an easy-to-maintain and useful icon library, all the while making your interface more appealing.
Like this article? Share it:
