material icons

иконки материалов

Новейшие иконочные шрифты и CSS для самостоятельного размещения значков материального дизайна.

Этот пакет автоматически обновляется, поэтому в нем всегда будут самые последние значки от Google.

Информацию о символах материалов см. material-symbols

Для SVG см. @material-design-icons/svg

• Установка
• Использование
• Доступные значки

Установка

Установите последнюю версию, используя:

npm install material-icons@latest

Примечание. Если вы обновляетесь с версии 0.x до версии 1.x, см. примечания к выпуску 1.0.0.

Использование

Импортируйте в JS (пример: src/index.js в приложении Create React, src/main.js в Vue CLI):

 import 'material-icons/iconfont/material-icons.css' ;

или импортируйте в CSS (пример: src/styles.css в Angular CLI):

 @import 'material-icons/iconfont/material-icons.css' ;

или импортируйте в HTML:

 < link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >

Чтобы отобразить значок, используйте одно из следующих действий:

 < span class =" material-icons " > pie_chart </ span >          <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span >    <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span >    <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->

Уменьшение размера сборки

material-icons.css по умолчанию включает CSS для всех шрифтов. Это может привести к тому, что инструменты сборки, такие как веб-пакет, будут копировать все шрифты в каталог сборки, даже если вы не используете их все. Чтобы уменьшить размер сборки, импортируйте только те стили, которые вам нужны. Например, если вам нужны только значки с заливкой и контуром, импортируйте filled.css и outlined.css вместо material-icons.css по умолчанию:

 - import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';

Показать все

Иконки	CSS	Сасс
Заполненный	заполненный.css	заполненный.scss
Изложил	в общих чертах.css	в общих чертах.scss
Круглый	круглый.css	круглый.scss
Острый	Sharp.css	Sharp.scss
Два тона	двухцветный.css	двухцветный.scss

Использование Sass

Импорт в Sass (пример: src/styles.scss в Angular CLI):

 @import ' material-icons/iconfont/material-icons.scss ' ;

Доступные переменные Sass:

 $material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;

Если вы получаете ошибки при работе с веб-пакетом или Vue CLI, добавьте эту строку перед импортом:

 $material-icons-font-path : ' ~material-icons/iconfont/ ' ;

Использование mat-icon Angular

Чтобы отобразить значок, используйте одно из следующих действий:

 < mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >

Использование классов CSS

Альтернативно вы можете использовать классы CSS вместо лигатур для отображения значков. Узнать больше

Доступные значки

Смотрите демо.

Лицензия

Иконки материального дизайна созданы Google.

Мы предоставили вам эти значки для включения в ваши продукты по лицензии Apache версии 2.0. Не стесняйтесь создавать ремиксы и повторно использовать эти значки и документацию в своих продуктах. Нам бы хотелось, чтобы указание авторства было указано на экране сведений о вашем приложении, но это не обязательно.