Спецификация импорта c значок материала

Question

Я создаю веб-приложение, которое использует Значки материалов Google . Почти все значки, которые я использую, имеют стиль «по умолчанию», а 1 - «контурный». Я импортирую значки со следующим кодом CSS:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|');

Это импортирует два файла шрифтов .woff, один для шрифтового семейства по умолчанию «Значки материалов» и один для семейство «Значки материалов выделено».

Учитывая, что я использую только 1 значок из выделенного семейства, есть ли способ импортировать только указанный значок c вместо импорта всей коллекции (без сохранения на местном уровне)?

Любая помощь приветствуется

Answer 1

Я столкнулся с подобной проблемой, но решил сам разместить иконку.

Не хотел добавлять пользовательский шрифт, поэтому скачал значок, отредактировал параметр fill="black" внутри SVG, чтобы он соответствовал цвету, который был после меня, и просто использовал его в теге img <img src="assets/delete-icon.svg"> .

Answer 2

Чтобы просто импортировать «заполненный» шрифт, удалите |Material+Icons+Outlined| из URL.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Нет официального CDN, который позволял бы вам просто получить одно изображение из Интернета, поэтому вам необходимо скачайте png или svg из библиотеки значков и разместите его самостоятельно.

Обратите внимание, что размер каждого файла шрифта составляет всего около 60–80 КБ (нажмите на ссылки ниже, чтобы убедиться сами), так что если вы Вы делаете это, чтобы уменьшить время загрузки, и это, вероятно, не будет иметь большого значения.

заполненный woff2 набросок woff2 .