Extending glyphicon set with custom icons

Is it possible to extend the glyphicon set with custom icons? I want to use custom icons for my project navigation tree and change their active/hover color. I already tried to upload SVG icons into an image collection. They are embedded via the src-attribute of <img>-tags and therefore their fill- or stroke-colors are not manipulable via CSS. Well, there are js-scripts to inline SVGs into your HTML, but that’s not the way I want to use it. I don’t want to use CSS filter function (such as hue-rotate) neither, because it seems a bit hacky for me.   Another way would be to embed a custom icon font. However you can’t use them for your project navigation, because you are not able to add CSS classes to it’s items.   Has anybody an idea, how to achieve custom icons inside the project navigation?
4 answers

You can extend your set of glyphicons by importing fontAwesome libraries in your custom SASS directory.

A little documentation about how to set this up:




Then, after implementing the needed parts in your project directory, you can just use classess on page elements to display various icons, for instance; you can add an empty container with the following classess:

fas fa-medkit fa-lg

Which will display the following one: https://fontawesome.com/icons/medkit?style=solid

(Note that the fa-lg class isn't actually needed, it just sets the size of the icon)


Edit: Also, when you want to display a specific icon before a text on your navigation items, consider adding a class to the text in button and using the :before selector.

See also: https://www.w3schools.com/cssref/sel_before.asp


When setting the icon for your menu item you can select images instead. Changing on hover is something you can’t do with default functionality, you would need to work around the default navigation.

In images you’re free to add icons or larger resolution images, effectively allowing you to add your own icons:

Hope this helps


Hi Franz,

This is a bit of a pain atm to do, there are a lot of downfalls of using default layouts and nav items in mendix.

create your own layout and use css and the :before selector to add your icons, then use some selector-wrap to show which one is selected.

this is how we do it with wizards.

@for $i from 1 through 7 {
  .ap_wizard.active#{$i} .ap_wizardstep:nth-child(#{$i}) {
    background-color: red;



btw i’ll drop this here :D