Hello,

I am trying to import own, custom created, icons into my OutSystems environment. I've read articles on how to do this (https://www.outsystems.com/blog/posts/beyond-spritely-images-using-icon-fonts-in-outsystems/ ), but I can't get it to work. The problem lays in the svg of the custom icon. To succesfully import a svg as icon, All vectors should be merged together into a single compound path  (https://www.nopio.com/blog/converting-svg-font-icon-using-icomoon/ ). However, when you have multiple color in your icon, you cannot merge it together into a single compound path. I have searched, but I cannot find a solution. I attached an SVG without merged compound paths.

This is the current CSS implementation I use:

@font-face {
    font-family: 'Glyphter';
    src: url('/CordovaPlugin/fonts/Glyphter.eot');
    src: url('/CordovaPlugin/fonts/Glyphter.woff') format('woff'),
         url('/CordovaPlugin/fonts/Glyphter.ttf') format('truetype'),
         url('/CordovaPlugin/fonts/Glyphter.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon2-']:before{
    display: inline-block;
   font-family: 'Glyphter' !important;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.icon2-time:before{content:'\0041';}

This results in the following icon (one color and no shadow etc):

Can anybody help me importing this icon as it is, with multiple colors, or provide a workaround to call two multiple classes in 1 icon?