The Icomoon workflow is a little complex, especially when updating an icon font. We have make up a better way that is friendlier to developers.
Icomoon.io offers a free app to build custom icon webfonts. It offers downloads as webfont set (.eot, .ttf, .woff, .woff2) or as icon set of SVG and/or PNG and many more file types, or even SVG sprites.
From my experience, the frontend developer should create the font, and not the designer. There are many tweaks required during font development, and routing changes over the designer imposes just too much overhead.
On rare occasions, webfonts may be blocked by an entreprise's security policy. Be sure webfonts can be used before building one.
Notes
Remove color from monochrome icons
Edit icon > Droplet > Remove color.
Do not remove color from multicolor icons. Icomoon splits multicolor icons into multiple glyphs that you can style separately and stack manually.
Condider the grid
Icons are designed for a specific grid size, e.g. 24x24px. Be sure to specify the correct grid size for each icon. Also note that using the font will look best at font sizes that are a multiple of the grid size, e.g. 24px, 48px etc. For pixel-stroke icons, sticking to grid multiples is a must, or they'll look blurred.
Remove any white space on the left and right
Each icon should only be as wide as it actually is. If you later need an icon to be "square" in space consumption, style it with width: 1em.
Save the font
Icomoon stores your font data in localstorage. Make sure you backup your data by downloading it from the projects page Show archive.org snapshot , e.g. after creating it and when finishing your website.
Define a baseline
On the "Generate Font" page, set a decent baseline height in the preferences panel. This is relevant when the icons are rendered inline with text. The default 6.25% are usually to low; a value of 16% should be fine for most use cases.
If you're into it, you may inspect your main text font (e.g. with fontforge) and calculate the baseline height from (Descent / Em Size).
