SVG from illustrator only partially rendered in font

[andyl...@gmail.com]

I uploaded an svg icon that I created in illustrator. It looks fine in icomoon, but the exported font only partially renders the icon. Any ideas how I can fix this?

Here is my svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.5 23.5"><title>plan</title><g id="Layer_2" data-name="Layer 2"><g id="Plan"><path d="M21,23.5H.52A.52.52,0,0,1,0,23V2.52A.52.52,0,0,1,.52,2H5.58a.52.52,0,0,1,.52.52V3a.52.52,0,0,1-.52.52H2A.52.52,0,0,0,1.5,4V21.48A.52.52,0,0,0,2,22H19.48a.52.52,0,0,0,.52-.52V4a.52.52,0,0,0-.52-.52H16.61A.52.52,0,0,1,16.1,3V2.52A.52.52,0,0,1,16.61,2H21a.52.52,0,0,1,.52.52V23A.52.52,0,0,1,21,23.5Z"/><path d="M16.06,5.5H5.79a.62.62,0,0,1-.62-.62V.62A.62.62,0,0,1,5.79,0H16.06a.62.62,0,0,1,.62.62V4.88A.62.62,0,0,1,16.06,5.5ZM7.29,4h7.26a.62.62,0,0,0,.62-.62V2.12a.62.62,0,0,0-.62-.62H7.29a.62.62,0,0,0-.62.62V3.38A.62.62,0,0,0,7.29,4Z"/><polygon points="4.42 10.42 2.42 8.62 3.08 7.88 4.42 9.08 7.42 6.38 8.09 7.12 4.42 10.42"/><rect x="8.75" y="8.25" width="10" height="1"/><polygon points="4.42 15.42 2.42 13.62 3.08 12.88 4.42 14.08 7.42 11.38 8.09 12.12 4.42 15.42"/><rect x="8.75" y="13.25" width="10" height="1"/><polygon points="4.42 20.42 2.42 18.62 3.08 17.88 4.42 19.08 7.42 16.38 8.09 17.12 4.42 20.42"/><rect x="8.75" y="18.25" width="10" height="1"/></g></g></svg>

[Keyamoon]

I don't see any issues. The font gets rendered properly for me. In what browser are you seeing the problem?

[andyl...@gmail.com]

I'm using google chrome.

It looks like it has to do with the extra css being generated for this particular icon:
.icon-plan .path1:before {
content: "\e910";
color: ;
}
.icon-plan .path2:before {
content: "\e911";
margin-left: -0.9150390625em;
color: ;
}
.icon-plan .path3:before {
content: "\e913";
margin-left: -0.9150390625em;
color: ;
}
.icon-plan .path4:before {
content: "\e914";
margin-left: -0.9150390625em;
color: ;
}
.icon-plan .path5:before {
content: "\e915";
margin-left: -0.9150390625em;
color: ;
}
.icon-plan .path6:before {
content: "\e916";
margin-left: -0.9150390625em;
color: ;
}
.icon-plan .path7:before {
content: "\e917";
margin-left: -0.9150390625em;
color: ;
}
.icon-plan .path8:before {
content: "\e918";
margin-left: -0.9150390625em;
color: ;
}

All of my other icons are only generating a single css rule. For example:
.icon-calendar:before {
content: "\e900";
}

In my app, I had just put, because I didn't notice that the extra css was being generated for the icon:
.icon-plan {
content: "\e910";
}

Is there a way I can make my svg generate a single css rule instead?

[andyl...@gmail.com]

It looks like icomoon thinks it's a multicolor icon, but there aren't multiple colors in the svg.

[Keyamoon]

Hmm, for me, the SVG you pasted above is recognized as a single colored icon. Could you send your project file? You can download it from Main Menu (top left) → Manage Projects.

[abca...@gmail.com]

Were you able to find a solution for this user? I seem to have a similar problem.

[Keyamoon]

I think it was resolved by reloading the project from Main Menu (top left) > Manage projects.

[andyl...@gmail.com]

I ended up solving it by using icomoon's svg editor to manually change each part of the svg to black so that it would be a single color icon.