Иконки

Иконка выводит символ шрифта Material Symbols по его имени и согласует размер, начертание и форму со шкалами Framework. Берите её, чтобы подкрепить подпись или узнаваемо обозначить действие; на цветной подложке её выделяет акцентная иконка.

Пример

Избранное

HTML

<div class="flex flex-wrap gap-4 items-center">
  <span class="flex items-center gap-1"><i class="sf-icon sf-icon--size-1" aria-hidden="true">favorite</i> Избранное</span>
  <i class="sf-icon sf-icon--size-3" role="img" aria-label="Настройки">settings</i>
</div>

Разметка

Минимальную разметку показывает пример выше: <i class="sf-icon" aria-hidden="true">favorite</i> — элемент с классом sf-icon и именем символа внутри.

Имя символа — из каталога Material Symbols, латиницей через _: arrow_upward, check_circle.
Без класса размера иконка берёт ступень 3; внутри кнопок, полей и других компонентов размер задаёт компонент.
Цвет иконка наследует от текста (currentColor); утилиты цвета на самой иконке или на родителе меняют его.
Имена с одним дефисом (sf-icon-bold, sf-icon-filled, sf-icon-solid, sf-icon-rounded, sf-icon-shape и другие) работают так же, как модификаторы sf-icon--weight-bold, sf-icon--filled, sf-icon--rounded и sf-icon--sharp; в разметке пишите модификаторы.
Класс sf-icon-loaded ставит загрузчик иконок Framework, когда шрифт готов; до этого иконка не видна, и вместо символа не мелькает его имя. Этот класс не пишите в разметке вручную.

Варианты

Семейство

Без класса иконка рисуется семейством Outlined. sf-icon--rounded берёт Rounded со скруглёнными концами, sf-icon--sharp — Sharp с острыми углами. Держите одно семейство во всём интерфейсе.

без класса: Outlined

sf-icon--rounded

sf-icon--sharp

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5" aria-hidden="true">favorite</i>
    <code class="text-1/2 color-on-surface-variant">без класса: Outlined</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--rounded sf-icon--size-5" aria-hidden="true">favorite</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rounded</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--sharp sf-icon--size-5" aria-hidden="true">favorite</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--sharp</code>
  </div>
</div>

Начертание

Толщину линии задают sf-icon--weight-thin, -extra-light, -light, -regular (по умолчанию), -medium, -semi-bold и -bold. Берите начертание, близкое к начертанию соседнего текста.

sf-icon--weight-thin

sf-icon--weight-extra-light

sf-icon--weight-light

sf-icon--weight-regular

sf-icon--weight-medium

sf-icon--weight-semi-bold

sf-icon--weight-bold

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--weight-thin sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--weight-thin</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--weight-extra-light sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--weight-extra-light</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--weight-light sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--weight-light</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--weight-regular sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--weight-regular</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--weight-medium sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--weight-medium</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--weight-semi-bold sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--weight-semi-bold</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--weight-bold sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--weight-bold</code>
  </div>
</div>

Заливка

sf-icon--filled заливает символ. Заливкой показывают выбранное состояние рядом с невыбранным контуром, например отмеченное избранное.

без класса

sf-icon--filled

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">без класса</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--filled sf-icon--size-5" aria-hidden="true">star</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--filled</code>
  </div>
</div>

Размер

Размеры 1/4, 1/3, 1/2 и 1–7 следуют шкале иконок Framework. Для иконки в строке текста берите ступень текста этой строки.

sf-icon--size-1/4

sf-icon--size-1/3

sf-icon--size-1/2

sf-icon--size-1

sf-icon--size-2

sf-icon--size-3

sf-icon--size-4

sf-icon--size-5

sf-icon--size-6

sf-icon--size-7

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-1/4" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-1/4</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-1/3" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-1/3</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-1/2" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-1/2</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-1" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-1</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-2" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-2</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-3" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-3</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-4" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-4</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-5</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-6" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-6</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-7" aria-hidden="true">circle</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--size-7</code>
  </div>
</div>

Цвет

Иконка красится утилитами цвета: color-on-surface — основной, color-on-surface-variant — второстепенный, color-primary — акцент, color-success, color-warning и color-error — статусы.

color-on-surface

color-on-surface-variant

color-primary

color-success

color-warning

color-error

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 color-on-surface" aria-hidden="true">info</i>
    <code class="text-1/2 color-on-surface-variant">color-on-surface</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 color-on-surface-variant" aria-hidden="true">info</i>
    <code class="text-1/2 color-on-surface-variant">color-on-surface-variant</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 color-primary" aria-hidden="true">info</i>
    <code class="text-1/2 color-on-surface-variant">color-primary</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 color-success" aria-hidden="true">check_circle</i>
    <code class="text-1/2 color-on-surface-variant">color-success</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 color-warning" aria-hidden="true">warning</i>
    <code class="text-1/2 color-on-surface-variant">color-warning</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 color-error" aria-hidden="true">error</i>
    <code class="text-1/2 color-on-surface-variant">color-error</code>
  </div>
</div>

Поворот

sf-icon--rotate-45 … sf-icon--rotate-315 поворачивают символ с шагом 45° вокруг центра: одна стрелка служит любым направлением.

без класса

sf-icon--rotate-45

sf-icon--rotate-90

sf-icon--rotate-135

sf-icon--rotate-180

sf-icon--rotate-225

sf-icon--rotate-270

sf-icon--rotate-315

HTML

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">без класса</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 sf-icon--rotate-45" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rotate-45</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 sf-icon--rotate-90" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rotate-90</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 sf-icon--rotate-135" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rotate-135</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 sf-icon--rotate-180" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rotate-180</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 sf-icon--rotate-225" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rotate-225</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 sf-icon--rotate-270" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rotate-270</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <i class="sf-icon sf-icon--size-5 sf-icon--rotate-315" aria-hidden="true">arrow_upward</i>
    <code class="text-1/2 color-on-surface-variant">sf-icon--rotate-315</code>
  </div>
</div>

Доступность

Иконку рядом с текстом скрывайте: aria-hidden="true".
Значимая иконка без подписи получает role="img" и короткий aria-label; иконка внутри кнопки остаётся скрытой, а имя получает кнопка.
Статус не передавайте только цветом иконки: нужен текст рядом или доступное имя.
Стрелки направления на странице с письмом справа налево поворачивайте классом поворота: шрифт сам их не зеркалит.

JavaScript

Иконки загружает Loader: он находит их на странице и запрашивает у сервиса иконок шрифт только с нужными знаками. Каждый запрос возвращает один шрифт со всеми иконками, найденными к этому моменту, поэтому иконка, которая появляется позже вместе с данными — значок узла дерева, пункт меню с сервера, — стоит второго запроса. Иконки, которые страница нарисует позже, объявляют заранее, и они попадают в первый запрос:

HTML

<script>
  window.SF_BOOT_CONFIG = {
    icons: {preload: ['article', 'library_books', {icon: 'star', filled: true}]},
  };
</script>

Запись — имя иконки или объект {icon, weight, filled, grade, opticalSize, type}. Компонент, который узнаёт иконки во время работы, передаёт такие же записи в SF.Loader.preloadIcons([...]).

Пока шрифт загружается, у корня страницы стоит data-sf-icons="subset-pending" и иконки не рисуются; этот атрибут и класс sf-icon-loaded — состояние Loader, вручную их не ставят.

Классы

Что	Классы
Блок	`sf-icon`
Части	`sf-icon-bold`, `sf-icon-extra-light`, `sf-icon-filled`, `sf-icon-light`, `sf-icon-medium`, `sf-icon-regular`, `sf-icon-rounded`, `sf-icon-semi-bold`, `sf-icon-shape`, `sf-icon-solid`, `sf-icon-thin`
Модификаторы	`sf-icon--filled`, `sf-icon--rotate-135`, `sf-icon--rotate-180`, `sf-icon--rotate-225`, `sf-icon--rotate-270`, `sf-icon--rotate-315`, `sf-icon--rotate-45`, `sf-icon--rotate-90`, `sf-icon--rounded`, `sf-icon--sharp`, `sf-icon--weight-bold`, `sf-icon--weight-extra-light`, `sf-icon--weight-light`, `sf-icon--weight-medium`, `sf-icon--weight-regular`, `sf-icon--weight-semi-bold`, `sf-icon--weight-thin`
Размеры	`sf-icon--size-1`, `sf-icon--size-1/2`, `sf-icon--size-1/3`, `sf-icon--size-1/4`, `sf-icon--size-2`, `sf-icon--size-3`, `sf-icon--size-4`, `sf-icon--size-5`, `sf-icon--size-6`, `sf-icon--size-7`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-icon); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-icon--fill`	`0`	`font-variation-settings`
`--sf-icon--font-family`	не задана; задают модификаторы, например `:root[data-sf-icons=subset-pending] .sf-icon`: `"Material Symbols Outlined Subset"`	`font-family`
`--sf-icon--font-size`	не задана; задают модификаторы, например `.sf-icon--size-1/4`: `var(--sf-icon-size-1/4)`	`font-size`
`--sf-icon--grade`	`0`	`font-variation-settings`
`--sf-icon--height`	не задана; задают модификаторы, например `.sf-icon--size-1/4`: `var(--sf-icon-size-1/4)`	`height`
`--sf-icon--line-height`	`1`	`line-height`
`--sf-icon--optical-size`	`24`	`font-variation-settings`
`--sf-icon--weight`	`var(--sf-weight--regular)`	`font-variation-settings`, `font-weight`
`--sf-icon--width`	не задана; задают модификаторы, например `.sf-icon--size-1/4`: `var(--sf-icon-size-1/4)`	`width`

Навигация

Главное

Документация

Содержание

Иконки

Пример

Разметка

Варианты

Семейство

Начертание

Заливка

Размер

Цвет

Поворот

Доступность

JavaScript

Классы

Переменные

См. также

Настройки

Иконки

Пример

Разметка

Варианты

Семейство

Начертание

Заливка

Размер

Цвет

Поворот

Доступность

JavaScript

Классы

Переменные

См. также

Поиск по документации