In order to customize your icons, I used Fontello. I used it, since it's pretty simple to use for anyone to select what icon they want and also customize their names for css or font characters.

Where is it located within the project?

The font are located under the following folders

ClientApp
 |- static
 |  |- fontello
 |  |  |- css
 |  |  |- font
 |  |  |- config.json
 |  |  |- license.txt
 |  |  |- README.txt

If you use Fontello website, the zip file generated will look like the Fontello sub-tree with the only difference that it also contains a demo.html page. The demo.html is really not important and you can skip it. Regarding the README.txt, it can also be removed. However, the license.txt is something you want to keep for your OSS. And the config.json is simply a configuration file in case you want to regenerate your icons.

Note that you can also use an API to generate you your ZIP file and download everything automatically.

Usage

Once you've selected all your icon, you can either use the icon component or simply use the css class. The idea here is that if you use the component, you will be able to do more customization in the future. This is something you might want to keep in case you want to colorize your icons or do anything special. It also serve as a base in order to understand how the general (base) components works.

<icon :icon="route.icon" /> <!-- If you bind your property -->
<icon icon="icon-home" /> <!-- Not bound property, instead, using the hard-coded CSS class -->

<!-- The html code can also be used (please read the doc ;))-->