What is different?
The new icon system (GUI 2.*) is based on the new svg Grunticon system from the genius Filament group.
GUI 1.* uses an icon font where each icon is a character in the font. Although this works well, there are a couple of drawbacks, including accessibility and file size. Using the new icon system, we can now display semantic, accessible icons when required.
Embedding icons
There are two ways to use svg’s: as a background image or direct embedding. Both methods are valid however it’s important to understand the implications. For example using the background method is not semantic or accessible whereas direct embedding is accessible as every svg comes with a title attribute that reflects its name. Embedded icons can be manipulated with CSS or JavaScript.
Icons as background image
In certain cases where an icon does not add direct value, you may not want a screen reader to detect the icon. In these instances, you still have the option to use the icon as a background image. Doing so will mean that the image will not be read out by assistive technologies, nor will it easily print.