SVG not rendering correctly after generation using Icomoon

Question

I'm a little stumped as to why my nice icon gets a little chewed up by Icomoon.

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
<path fill="green" d="M277.452 42.987c0 15.59-12.756 28.347-28.347 28.347H51.132c-15.59 0-28.347-12.756-28.347-28.347v-14.64C22.785 12.757 35.542 0 51.132 0h197.973c15.59 0 28.347 12.756 28.347 28.347v14.64zM150.452 212h86.334s67.333 32 64 107.333H151.452l-1-107.333z"/>
<path fill="green" d="M150.453 212H64.12s-67.333 32-64 107.333h149.334l1-107.333zm-27 107.333l26 144.667 25-144.667"/>
<path fill="green" d="M64.12 67.495v251.838h170.666V67.495H64.12zm59.332 117.838L106.12 212V75.333h17.332v110z"/>
</svg>

I'm no expert with icon fonts and SVGs, but this all looks correct and Icomoon doesn't complain. It just seems to cut out the intersection between two paths in this SVG when generating the font. A colleague has reported seeing the icon without this issue, which makes this issue murkier.

Could someone lend some wisdom?

Answer 1

The problem area, as you said, corresponds to the overlap of two of your paths:

You should flatten your SVG to a single shape with as few paths and points as possible. Overlapping paths, especially in fonts, will give you a lot problems if you don't pay attention to path direction etc. Just don't do it; it's bad practice and will just give you headaches.

This is your SVG fixed as a single path (via Illustrator's Pathfinder):

<svg xmlns="http://www.w3.org/2000/svg" width="624" height="600" viewBox="-161.358 -67.667 624 600">
    <path fill="green" d="M236.786,212h-2V71.334h14.318c15.591,0,28.348-12.757,28.348-28.347v-14.64C277.452,12.756,264.695,0,249.105,0H51.132c-15.59,0-28.347,12.757-28.347,28.347v14.64c0,15.591,12.757,28.347,28.347,28.347H64.12V212c0,0-67.333,32-64,107.333h123.333l26,144.667l25-144.667h126.333C304.119,244,236.786,212,236.786,212z M106.12,75.333h17.332v110L106.12,212V75.333z"/>
</svg>