В списке с
align-items: center иконка выглядит нормально, пока подпись занимает одну строку. После переноса она оказывается посередине всего текста. Переключение на start поднимает её вверх, но не центрирует относительно первой строки.Ахмад Шадид предлагает рассчитывать смещение через высоту строки и размер иконки:
calc((1lh - var(--size)) / 2). Значение передают в translateY(). При изменении шрифта или размера значка отступ пересчитывается вместе с ними.Для иконки в псевдоэлементе дополнительно нужны
flex-shrink: 0 и квадратное соотношение сторон через aspect-ratio: 1: длинная подпись не должна сжимать значок.В разборе с интерактивными примерами можно менять ширину списка, шрифт и размер иконки. Удобный способ проверить компонент на длинных названиях и увеличенном тексте.
