🎯 Иконка в списке съезжает, когда подпись переносится на вторую строку

Иконка и текст стоят в flex-контейнере с align-items: center. Когда текст переносится, иконка встаёт посередине всего блока, а не напротив первой строки.

С align-items: start она поднимается выше букв: у строки есть пустое место от шрифта. Сдвиг на фиксированные 3px ломается, как только меняется шрифт или размер иконки.

Надёжнее считать сдвиг через CSS-единицу lh, она равна высоте строки:

.icon {
/* --icon-size is defined via JS. */
--size: var(--icon-size);
--offset: calc((1lh - var(--size)) / 2);
transform: translateY(var(--offset));
}

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

А для иконки в ::before понадобятся ещё aspect-ratio и height: auto, и это отдельная история.

👉 @seniorFront