Issue using custom icon with Tag Icons

[pmusaraj (Penar Musaraj)]

Hi @kristof_mulier, welcome to Discourse!

Here is how you can add a custom icon:

@pmusaraj

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).