How do I “pull out” only the dozens of icons that I actually use?

Question

I have an angular project that is built using grunt, which uses maybe a dozen icons from an awesome font. I am currently including and thus distributing the entire font library. Is there a way to “pull out” only the icons that I actually use (preferably as part of the build process)?

I saw the icomoon app, and it seems to give me the result I want, but this is a manual update process when the icon changes.

Answer 1

First use Font-Awesome-SVG-PNG to get separate SVG files for each Awesome font icon.

font-awesome-svg-png --color black --sizes 128 --no-png 

Then, using grunt-webfont , combine the icons you selected (from the SVG generated in the previous step) into a custom webfont.

For example, if you want to include only icons with the keyword angle - in your web interface, then the grunt task will look like

 webfont: { icons: { src: 'black/svg/angle-*.svg', dest: 'build/fonts' } }