pmusaraj
December 18, 2019, 9:00pm
2
Hi @kristof_mulier , welcome to Discourse!
Here is how you can add a custom icon:
Adding custom icons
If you would like to have more icons than what’s available in FontAwesome, you can add your own SVG icons in a plugin or a theme. See this SVG sprite for an example of how to structure your sprite. (It’s essentially a list of <symbol> elements, each with its own unique ID.)
In themes and components : add the SVG sprite in the /assets folder, and reference it in about.json using the variable name icons-sprite . For a sprite called my-icons.svg , your assets.json should include this:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
You can also add the SVG sprite to a theme or component via the UI, when doing so, make sure the SCSS var name is set to icons-sprite . Screenshot:
Basically, you need to add the SVG icon to a sprite, give it an ID and then add the sprite to the theme and set the var name for it to icons-sprite. Once that’s done, you can use the ID of the icon like the FA icon ids (and don’t use the $ symbol).
4 Likes