Поддержка лигатурных иконок браузерами

Короткий ответ:

1. Сделано это с помощью подключения символьного шрифта от Google

   Краткая аннотация от Google:
   Шрифт обеспечивает читаемость и четкость символов, как больших, так и малых размеров. Эти иконки оптимизированы для красивого отображения на всех распространенных платформах и разрешениях дисплея.

2. Поддерживается всеми современными браузерами. Поддержка IE, начинается с IE10.

Таблица поддержки символьных шрифтов браузерами.

Более подробно:

Всё началось в 2012 году.

Разработчики github.com решили повысить производительность своего сервиса и заменить множество различных иконочных шрифтов одним своим стандартным Octicons, который отвечал бы всем их потребностям в отображении иконок.
Скачать шрифт можно здесь

В марте 2013 года портал alistapart выпускает свою аналитическую статью -
The Era of Symbol Fonts

В которой автор рассказывает о преимуществах и некоторых недостатка применения символьных шрифтов. Автор статьи пишет, что шрифт, как векторное изображение поддерживается всеми браузерами вплоть до IE6.

Я перевел заключительную часть статьи, заранее извиняюсь за вольный перевод

Проблемы с шрифтами

Любой хороший дизайнер скажет вам, что значок или логотип будут иметь тонкие различия дизайна для разных размеров шрифтов, таких как, изменение толщины линии или даже уменьшение некоторых деталей при небольших размерах.
Однако с символьными шрифтами вы не можете создавать альтернативные варианты для разных размеров шрифта.

Если вам нужны разные рисунки при изменении размера шрифта то, вам необходимо дублировать иконку в файле шрифта и выбрать соответствующий глиф в зависимости от использования.

Это тоже проблематично, потому что вы не представляете, как конечный пользователь действительно просмотрит ваш дизайн. Увеличение размера шрифта в их браузере изначально не приведет к изменению дизайна символа.

Для большинства из нас это не проблема, так как многие иконки, которые мы используем сегодня для фидов и социальных сетей, относительно хорошо знакомы нам.

Другая важная проблема с использованием символьного шрифта заключается в том, что вы получаете только один цвет. Вы можете использовать магию с цветами фона и градиентами шрифта для эмуляции двухцветного логотипа, но если ваши иконки многоцветны, то текущая настройка шрифта символов не будет работать для вас.

Чтобы исправить это, Apple предлагает многоцветные шрифты, которые позволят вам создавать и вставлять чистую векторную графику на любую веб-страницу.

Первой попыткой в этой области является шрифт Apple Color Emoji, который вы, возможно, уже имеете, если на вашем компьютере работает OSX Lion

Google Material Icons

Google воплотил идеи символьного шрифта в реальность и создал свой символьный шрифт svg иконок, который включает в себя 900 изображений.

Подключение шрифта:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">         

Выбирать иконки по названиям можно здесь

Пример использования гугловского символьного шрифта:

Наведите курсор на иконки

i { 
  margin: 100px 50px 50px 80px; 
  transition: transform 1s ease-in-out; 
} 
i:hover { 
  transform: scale(10); 
} 
 
.red{color:red} 
.green{color:yellowgreen} 
.blue{color: dodgerblue}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<i class="material-icons red">settings</i>  
<i class="material-icons green">android</i> 
<i class="material-icons blue">stars</i> 

Проверена работоспособность FF, Chrome, Opera, IE11.
К сожалению не имею возможности проверить работоспособность на более старых версиях IE и Safari