Importing multi color svg custom icons

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? 


Hello Tyler,

I don't expect you to be able to do what you want. 

You are trying to create a "font". In OutSystems, "icons" are not images, but a font. Even if they are based on an SVG image, they behave like a font, and I think it is simply not possible to have a Font where the "letter" have different colors.

So, you can't do that, I think... (I may be wrong, of course).

Cheers.


Hi Eduardo,

I was afraid of this. Do you maybe know any other way to achieve what I want in a relative simple and performance friendly way? The only option I can think of is creating the css myself..

Hi, 

Maybe there is a way.

Did you try this?

https://stackoverflow.com/questions/33371715/create-multicolor-icons-icomoon

You may need to adapt the font-face and add some CSS anyway (the answer has an example).

(I'll try to bring someone that is much more experienced on those things...lol)

Eduardo Jauch wrote:

(I'll try to bring someone that is much more experienced on those things...lol)

 Haha thanks! Meanwhile, I will try some other things

Solution

I am now exploring a solution where I just upload the svg as a local image, which seems to work fine. However I am still curious if there is an option to be able to use the svg as an icon, but for now, I have a working solution.

Solution