Efficiently use font icons on web pages

In order to have a webpage with content other than text, it should also be possible to add icons that are stored as a font file. A web designer and content provider would like to use them as vector graphics so that quality is not lost when zooming/printing a document. In order to do that they need a way to reference a single icon and be able to manipulate it as a DOM object (e.g. hide, change style, animate,...). Important restriction is that all icons should stay in one file, which requires user to make only one request to the server (to download a single file).
1 answer

Use icon system with svg sprites

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/