Почему не отображаются svg-иконки на icomoon?

Есть более современный способ включения иконок в свой проект, это - символьный шрифт от Google

Это 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:green;} 
.blue{color: dodgerblue;}

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

• Как вы заметили, можно менять цвет иконок из внешнего файла css.
• Ещё одно преимущество применения этого шрифта,- в любой момент вы можете в любом месте проекта заменить одну иконку на другую, изменив лишь её имя.

Более подробно об использовании гугловского символьного шрифта в другом топике нашего сайта.

Для использования в веб-шрифтах svg-иконка должна иметь заливку черным цветом, причем не обводка, а само содержимое. Если иконка нарисована просто толстыми линиями, необходимо обконтурить обводку. Я использую "Inkscape SVG" для этих целей