Оновлення 2019 року тут:
Для самостійного розміщення значків матеріалів, звичайних, закруглених, різких, усіх варіантів. Перейдіть за цим репо:
https://github.com/petergng/material-icon-font
Чомусь я не знаю, чому ці шрифти не доступні з репозиторіїв Google.
Але ось ви йдете.
Завантаживши пакет, перейдіть до папки бін, і ви побачите чотири варіанти. Звичайно, від вас залежить використання будь-якого.
Для їх використання створіть файл css і
- Створіть шрифт для кожного потрібного варіанту:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
src: local('Material-Icons-Regular'),
url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
src: local('Material-Icons-Round'),
url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
url(./icons/round/Material-Icons-Round.woff) format('woff'),
url(./icons/round/Material-Icons-Round.svg) format('svg'),
url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
src: local('Material-Icons-Sharp'),
url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}
Посилання urlпосилається на те, де значки розміщені у вашому проекті.
- Тепер давайте реєструємо класи іконок:
.material-icons-outlined, .material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Це зробить і те,
.material-icons-outlined,
і
.material-iconsкласи використовувати однакові за замовчуванням. Якщо ви хочете використовувати .material-icons-sharp, просто додайте їх до двох імен класу.
- Нарешті, дозвольте нам підключити обличчя шрифту, яке ви витягнули з кроку 1.
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
Знову ж таки, щоб використовувати більше варіант, наприклад, Sharp, просто додайте його блок, як два вище.
Після закінчення ... перейдіть до свого html та використовуйте нещодавно викарбовані піктограми.
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
