Icon font with multi-color SVG icons - html

Question

We are trying to create an icon font for our custom multi-color icons. Icomoon worked like a charm for our UI icons (mono-color) but with multi-color icons, multiple lines are required to use an icon (look at the example below). Is there any way to achieve a similar behavior as the mono-colors but for multi-color SVG icons?
ex
mono-color icon:
<span class="icon-name">
multi-color icon:
<span class="icon-name">
<span class="path1">
<span class="path2">
<span class="path3">
<span class="path4">
<span class="path5">
<span class="path6">
<span class="path7">
<span class="path8">
</span>

Answer 1

If I understand that correctly, you are struggling with colouring svgs.
The svg code can contain a fill element (https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle for reference).
Moreover, you could try to change the color by using CSS (color property).

Answer 2

If you need to use an icon font (instead of inlined svgs) you can't circumvent placing multiple glyphs/elements for each color.
To some extend you might achieve a multicolored text display with Opentype SVG fonts.
Unfortunately browser support is quite limited:
Photoshop, version CC 2017 and above
Illustrator
Firefox, version 32 and above
Microsoft Edge, Windows 10 Anniversary Edition and above
In Windows 10, the DirectWrite and Direct2D platform components allow OpenType-SVG support in any apps that use those APIs
Besides converting svgs to such a font file will require more sophisticated font editors or at least more experience in font file generating/editing.
So using icon svgs directly is certainly more straightforward.
You can achieve a quite font-like behaviour e.g by:
combining multiple icons in a single svg using <defs> or <symbol>
using keyword based fill properties like "currentColor" to color icons via text color
using css-variables to define reusable color themes
Example: inlined svg icons
let iconInserts = document.querySelectorAll(".icon-insert");
let iconDefs = document.querySelector(".iconDefs");
if (iconInserts.length) {
iconInserts.forEach(function (iconSpan) {
let iconName = iconSpan.getAttribute("data-icon");
let symbolHref = "#" + iconName;
let iconDef = iconDefs.querySelector(symbolHref);
let viewBox = iconDef.getAttribute("viewBox");
// insert
let iconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
iconSVG.classList.add("svg-inline");
iconSVG.setAttribute("viewBox", viewBox);
let iconUse = document.createElementNS("http://www.w3.org/2000/svg", "use");
iconSVG.appendChild(iconUse);
iconSpan.appendChild(iconSVG);
iconUse.setAttribute("href", symbolHref);
iconUse.classList.add(iconName);
});
}
body{
font-size:15vmin;
}
.svg-inline{
display:inline-block;
height:1em;
transform:translateY(20%);
}
.theme1{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
.theme2{
--col1:green;
--col2:green;
--col3:green;
--col4:orange;
--col5:orange;
--col6:orange;
--col7:green;
}
.icon-news{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
<p>
<svg class="svg-inline theme1" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon (colored by css vars)
<svg class="svg-inline theme2" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon 2 (colored by css vars)
<svg class="svg-inline" viewBox="0 0 1000 1000" style="color:orange">
<use href="#icon-news2" />
</svg>
Sample icon 3 (colored by currentColor)
<span class="icon-insert" data-icon="icon-news"></span>
Sample icon 4 (injected by js)
</p>
<!-- icon library in hidden svg file -->
<svg class="iconDefs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="display:none">
<symbol id="icon-news" viewBox="0 0 1000 1000">
<path fill="var(--col1)" id="p6" d="M251 658h313v62H251z" />
<path fill="var(--col2)" id="p5" d="M626 658h252v62H626z" />
<path fill="var(--col3)" id="p4" d="M626 531h252v63H626z" />
<path fill="var(--col4)" id="p3" d="M626 406h252v63H626z" />
<path fill="var(--col5)" id="p2" d="M626 282h252v62H626z" />
<path fill="var(--col6)" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="var(--col7)" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
<symbol id="icon-news2" viewBox="0 0 1000 1000">
<path fill="currentColor" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="currentColor" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
</svg>
You might also write a simple icon insertion script injecting placeholder span elements by svg instances (4. example)
<span class="icon-insert" data-icon="icon-news"></span>
could be replaced by something like this:
<span class="icon-insert" data-icon="icon-news">
<svg class="svg-inline" viewBox="0 0 1000 1000">
<use href="#icon-news" class="icon-news" />
</svg>
</span>
Some icon libraries also provide a similar js based injection approach (e.g feather icons)
See also: css-tricks: Inline SVG vs Icon Fonts [CAGEMATCH]