Adding styleable Icons to Mendix

Hello Mendix-Enthusiasts, My problem is:  I want to use a “car” Icon in one of my buttons in a “Menu” (Snippet to use on multiple pages, see screenshot below). I am using multiple built in Icons and when I hover over the buttons, the Icon and Button change color. I want this logic to work for the added “car” icon as well. Currently the "car" icon is added image collection and is transfered into an <img> tag.  I tried it with adding a “car” svg as image, but changing its color while hovering seems shockingly hard to implement, if even possible. (screenshot shows current Structure) I need an Icon to be added as glyphicon of some sort to make the color changes happen like with the built in icons. If there is more information needed, I am happy to deliver. I am using Version 9.12.5. Regards, Gerrit The car seen is an image added as icon, not a glyphicon like the other 3. I want this car to react like the other icons. It is not required to be an image, if there is a possible way to add glyphicons to Mendix?
1 answers

Hi Gerrit,

Use the Below code to change the color of icon aswell as text on hover in your custom.scss file and make change the styles according to your theme.

.region-sidebar .mx-navigationtree .navbar-inner>ul>li a:hover, .region-sidebar .mx-navigationtree .navbar-inner>ul>li a:focus, .region-sidebar .mx-navigationtree .navbar-inner>ul>li {

  1. color: #fff;
  2. background-color: #5f5f5f;
  3. background-color: #1fc2a3 !important;
  4. color: #050505 !important;
  5. filter: invert(99%) sepia(1%) saturate(50%) hue-rotate(


    ) brightness(179%) contrast(100%) !important;



this will work.