Evolve allows you to upload your own icon set and use them in custom themes. To accomplish this, you will need to use the IcoMoon tool; this is what our Evolve team used to create the default icon set available for your courses.
In this article, you'll learn how to create and upload your own icon set using the IcoMoon tool.
Create an icon set
First, you'll need to open IcoMoon within your web browser. You can access the site via the link below:
IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.
Next, you'll want to launch the IcoMoon app by clicking the IcoMoon App button.
When the IcoMoon app first loads, click the Import Icons button on the top left. In the file dialog, select the default .svg file included in this page, linked below:
When the file is selected you will be asked to use the font’s metadata. Click 'yes'. You will now see 68 icons in a set called default. These are all the icons that Evolve requires to be available.
Next, select all the icons to begin replacing them. You can either click each one or use the menu on the right-hand side and click Select All. It’s important that all icons are selected otherwise you will find missing icons in your theme.
Once all the icons have been selected, click on the Generate Font button on the bottom right. You will then be taken to a new screen. Here, you can start replacing the icons with your own. Start by clicking on an icon. A dialog should appear with more details about that icon.
This dialog now allows us the ability to replace the icon SVG. Click the Replace button. This will now open a file dialog where you can pick your icon. The icon must be in SVG format and the color must be black (hex code #000000).
Once you have picked your SVG file, it will update the icon set. This should also be reflected in the dialog. This can be done for all icons or the few you would like to change.
It it important that the name of the icon is not changed. Evolve requires the name to be the same in order to show the correct icon.
Once you have replaced the icons, it's time to publish them. First, we will need to set a unique name for this icon set. Click the gear icon next to the download button on the bottom right. This will show a dialog where you can set the name. All other settings should be the same. Close the dialog once you have changed the name.
The icon set is now ready to be downloaded! Click the Download button on the bottom right and save to your computer. This should download a zip file. We are now ready to upload this set into Evolve.
Upload an icon set to Evolve
In Evolve, navigate to the Assets tab in the top navigation bar. Then click on Manage Icons on the top right of the screen. Here you can see all installed icon sets. They can also be removed here if no longer required.
Click Upload Icons on the top right of this screen. You will be presented with a screen where you can select the zip that you download from IcoMoon.
If the icon installed successfully, click the Done button and you will now see that icon set listed in the Manage Icons screen. This icon set is now ready to be selected in your custom themes.
An error dialog will be displayed if there was an issue with the icon set. If this happens, follow the steps mentioned above and try again. Make sure not to set a name that is already being used by a previous icon set. If you are unable to upload your icon set or have any other issues, please contact the Evolve support team through Support in Evolve and we will be happy to help.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.