It is possible to use inline SVG elements with special "\use\" tag. First of all, we assume that a collection of items is represented as a .svg collection (it is possible to extract and convert files from a font file to svg using online converters). There are utilities that can help combine all svg files into a single file, e.g. https://github.com/FWeinb/grunt-svgstore.
Elements inside svg can be referenced as normal DOM elements, e.g. by using their id. There are then two ways to add a single element (icon) into web page:
1) Reference in the same document:
\svg\
\use xlink:href="#icon-1"\\/use\
\/svg\
2) Reference from external document
\svg\
\use xlink:href="sprite.svg#icon-1"\\/use\
\/svg\
In this example #icon-1 - is a unique identifier inside svg document.
Further reading: https://css-tricks.com/svg-sprites-use-better-icon-fonts/