Material icon html code

Icons

Material takes advantage of the over 900 icons offered by the official icon set from Google.

Choose your icon set

Daemonite Material Design for Bootstrap 4 is dependent of Material Design Icons and therefore requires at least this stylesheet declaration in your HTML header.

 href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" crossorigin>

For more creativity, it is compatible with all variants of Material Design Icons (Filled, Outlined, Rounded, Two-Tone and Sharp versions, declared in the same order below).

You can apply changes to your page immediately by modifying the stylesheet declaration according to the icon set you want (pick the one you want below).

 href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" crossorigin>  href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" crossorigin>  href="https://fonts.googleapis.com/css2?family=Material+Icons+Round" rel="stylesheet" crossorigin>  href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone" rel="stylesheet" crossorigin>  href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp" rel="stylesheet" crossorigin>

You can even mix multiple icons sets within your page with a combined stylesheet declaration like this (i.e. Baseline and Outlined versions).

 href="https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined" rel="stylesheet" crossorigin>

HTML markup

Then, it is easy to incorporate icons into your web page. You can browse the icon set and copy-paste the HTML markup from the Material icons library.

NB. In order to allow you to switch fast from one icon set to another, Daemonite Material Design promotes the usage of the default HTML markup using . (and avoid specific ones like . ).

Hence, you can swith from one icon set to another without rewriting all your icon tags.

HTML markup with different icon styles

In the case you want to use 2 different Materials Icons sets (i.e. Baseline and Outlined icons) on a page, you will need to specify . for the icons that will have to be in an Outlined style.

For a Sharp + Round combination, you must declare icons with both . and . tags.

In case you want to switch to a single Material Icons set, as seen above, you don’t have to change all your icon HTML markup, they will all be set to your current declared Material Icons set. In fact, all icons declared with .material-icons* will style according to the active font stylesheet.

Browser support

NB. For browsers that do not support ligatures (IE11), fall back to specifying the icons using numeric character references like the example below:

Источник

Руководство по обозначениям материалов

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Что такое материальные символы?

Material Symbols — это наши новейшие значки, объединяющие более 2500 глифов в одном файле шрифта с широким спектром вариантов дизайна. Символы доступны в трех стилях и четырех регулируемых осях шрифта (заполнение, вес, качество и оптический размер). См. полный набор символов материалов в библиотеке символов материалов .

FILL ось

Заливка дает вам возможность изменить стиль значка по умолчанию. Один значок может отображать как незаполненные, так и заполненные состояния.

Чтобы передать переход состояния, используйте ось заполнения для анимации или взаимодействия. Значения: 0 для значения по умолчанию или 1 для полного заполнения. Наряду с осью веса заливка также влияет на внешний вид значка.

wght веса

Толщина определяет толщину обводки символа в диапазоне от тонкой (100) до полужирной (700). Вес также может влиять на общий размер символа.

ось GRAD

Вес и класс влияют на толщину символа. Корректировки оценки являются более детальными, чем корректировки веса, и имеют небольшое влияние на размер символа.

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

Вы можете использовать грейд для разных нужд:

Низкий уровень выделения (например, -25): чтобы уменьшить блики для светлого символа на темном фоне, используйте низкий уровень.

Высокое выделение (например, оценка 200): чтобы выделить символ, увеличьте положительную оценку.

opsz опсз

Оптические размеры варьируются от 20dp до 48dp.

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

Получение символов материала

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

Лицензирование

Материальные символы доступны по лицензии Apache версии 2.0 .

Просмотр и загрузка отдельных значков

Полный набор символов материалов доступен в библиотеке символов материалов в форматах SVG или PNG. Они подходят для Интернета, Android и iOS или с любыми дизайнерскими инструментами.

Git-репозиторий

Репозиторий git содержит полный набор символов материалов в формате SVG.

$ git clone https://github.com/google/material-design-icons 

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

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

Шрифт Material Symbols — это самый простой способ включить Material Symbols в веб-проекты.

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

Статический шрифт с Google Fonts

Самый простой способ настроить иконочные шрифты для использования на любой веб-странице — через Google Fonts . Включите эту единственную строку HTML:

Приведенный выше фрагмент включает конфигурацию по умолчанию для каждой оси с весом 400, оптическим размером 48, уклоном 0 и заполнением (также 0).

Используйте Fonts CSS API для настройки различных значений осей. Взгляните на следующие примеры:

Переменный шрифт с Google Fonts

Если вы анимируете значки с помощью CSS или хотите более точно управлять функциями значков, используйте переменный шрифт Google Symbols. Используя диапазоны в формате number..number , мы можем загрузить весь переменный шрифт. Ознакомьтесь с поддержкой переменных шрифтов Can I Use, чтобы понять, смогут ли ваши пользователи загружать переменный шрифт, скорее всего, да. Вот некоторые примеры:

Самостоятельное размещение шрифта

Разместите значок шрифта в месте, которым вы управляете, чтобы решить, когда обновлять актив. Например, если URL-адрес https://example.com/material-symbols.woff , добавьте следующее правило CSS:

Примечание. Чтобы обеспечить наилучшие возможности для всех пользователей, может потребоваться несколько форматов шрифтов, которые предоставляет Google Fonts API. Узнайте больше о «самостоятельном размещении» в Google Fonts Knowledge .

Чтобы правильно отображать шрифт, объявите правила CSS для отображения значка. Эти правила обычно являются частью таблицы стилей Google Fonts API, но при самостоятельном размещении их необходимо будет вручную включить в ваши проекты:

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

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

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

Если вам нужна поддержка браузеров, которые не поддерживают лигатуры, укажите значки, используя числовые ссылки на символы (также известные как кодовые точки), как в примере ниже:

Найдите имена значков и кодовые точки в библиотеке символов материалов , выбрав любой значок и открыв панель шрифтов значков. У каждого иконочного шрифта есть индекс кодовых точек в git-репозитории Google Fonts, показывающий полный набор имен и кодов символов.

Стилизация иконок в Material Design

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

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

В библиотеке символов материалов все значки представлены в формате Vector Drawable. Чтобы узнать больше, ознакомьтесь с документацией Android Vector Asset Studio .

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

Иконки также доступны в формате Apple Symbols. Чтобы узнать о них больше, ознакомьтесь с официальным обзором символов Apple и руководством по использованию .

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

Планируется поддержка Flutter для материальных символов. Следите за обновлениями.

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-03-31 UTC.

Источник

Material Icons

Google provides a set of 750 icons designed under «material design guidelines» and these are known as Material Design icons. These icons are simple and they support all modern web browsers. Since these icons are vector based, they are scalable as well. To use these icons, we have to load the font (library) material-icons.

Loading the Font (library)

To load the material-icons library, copy and paste the following line in the section of a webpage.

Using the Icon

Google’s Material Icons provides a long list of icons. Choose any one of them and add the name of the icon class to any HTML element within the < body >tag. In the following example, we have used the icon named accessibility that belongs to the action category.

It will produce the following output −

Defining the Size

You can increase or decrease the size of an icon by defining its size in the CSS and using it along with the class name as shown below. In the following example, we have declared the size as 6 em.

It will produce the following output −

Defining the Color

You can use the CSS to define the color of an icon. The following example shows how you can change the color of an icon called accessibility.

It will produce the following output −

List of Categories

Google’s Material Icons font provides 519 icons in the following categories −

• Action Icons
• Alert Icons
• AV Icons
• Communication Icons
• Content Icons
• Device Icons
• Editor Icons
• File Icons
• Hardware Icons
• Image Icons
• Maps Icons
• Navigation Icons
• Notification Icons
• Social Icons
• Toggle Icons

To use any of these icons, you have to replace the class name in the programs given in this chapter with the class name of the desired icon. In the coming chapters of this Unit (Material Icons), we have explained category-wise the usage and the respective outputs of various Material Icons.

Источник

Icons Tutorial

To insert an icon, add the name of the icon class to any inline HTML element.

The and elements are widely used to add icons.

All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

Font Awesome 5 Icons

To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.

Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.

Note: No downloading or installation is required!

Example

Font Awesome 4 Icons

To use the Font Awesome 4 icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Bootstrap 3 Icons

To use the Bootstrap 3 glyphicons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Note: Glyphicons are not supported in Bootstrap 4.

For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.

Google Icons

To use the Google icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

cloud
favorite
attachment
computer
traffic

For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.

Источник