Allow for Multi-Colored SVG Icons

[ryangwilson]

We have a need for multiple colors to be included/embedded in SVGs in out icon sets. This is easily done in IcoMoon, but is a shortcoming of Fontello.

In IcoMoon we can touch internal paths, e.g.:

.icon-sun-happy .path1:before {
  content: "\e900";
  color: rgb(255, 204, 51);
}
.icon-sun-happy .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: rgb(255, 102, 0);
}
.icon-sun-happy .path3:before {
  content: "\e902";
  margin-left: -1em;
  color: rgb(255, 102, 0);
}
.icon-sun-happy .path4:before {
  content: "\e903";
  margin-left: -1em;
  color: rgb(255, 102, 0);
}

[Dreamersoul]

Fonts are not meant to include colors if I recall correctly. I usually just apply a CSS color property to color the font

[puzrin]

As been said - this job is for CSS, not related to fontello.

[hansmbakker]

Hi @puzrin, can you please reopen this issue?

The point is that multi-colored SVGs need to be split into multiple glyphs that can be rendered on top of each other.

• The coloring can indeed be done by CSS
• However, the splitting is something that can be done by Fontello
• Also, it would be helpful if Fontello would generate the CSS to stack the glyphs and color them like IcoMoon does:

Font glyphs cannot have more than one color by default. Using CSS, IcoMoon stacks multiple glyphs on top of each other to implement multicolor glyphs. As a result, these glyphs take more than one character code and cannot have ligatures.

Using this SVG: , IcoMoon understands it is a multi-colored SVG that needs to be split into multiple following glyphs, and it generates the required CSS to color those glyphs and stack them on top of each other:

.icon-Account-circle-duotone .path1:before {
  content: "\e900";
  color: rgb(86, 134, 225);
  opacity: 0.3;
}
.icon-Account-circle-duotone .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: rgb(86, 134, 225);
}

It creates a \e900 glyph for the background and a \e901 glyph for the foreground.

This is also how FontAwesome works: https://blog.pieeatingninjas.be/2022/12/13/fontawesome-duotone-icons-in-maui-and-xamarin-forms/