Как выровнять текст по вертикальной линии не меняя ширины разношироких иконок?
Есть список со структурой:
<ul>
...
<li>
<img class="icon" src="icon.svg" />
<p class="text"> Text </p>
</li>
...
</ul>
Иконки - svg разных размеров (ширина от 40px до 45px).
Иконке задан margin-right
и мы получаем проблему:
Мой вариант 1 - иконки не соответствуют дизайну
Если мы ставим фиксированную ширину иконки то текст получается по одной вертикальной линии (желаемый результат), но в таком случае иконки по размеру не соответствуют дизайну.
Мой вариант 2 - текст не располагается по одной линии
Если не трогать ширину иконки, то они выглядят как и задумано дизайнером, но текст идёт не по одной вертикальной линии (это недопустимо).
Подскажите пожалуйста как красиво написать стили, чтобы иконки были разной ширины, а текст шёл по одной линии.