Как изменить цвет иконки svg с помощью css?

@margaret 

Для изменения цвета иконки SVG с помощью CSS можно использовать свойство fill. Вот пример:

HTML:

1
2
3

<svg class="my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L3 9h3v13h12V9h3zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4z"/>
</svg>

CSS:

1
2
3

.my-icon {
  fill: red;
}

В этом примере иконка будет окрашена в красный цвет. Вы можете изменить значение свойства fill на любой цвет, указав его либо в формате имени цвета (например, "red"), либо в шестнадцатеричной нотации (например, "#ff0000").

Также, если у иконки применен атрибут fill, который переопределяет цвет в CSS, вы можете использовать значение none для отключения заливки или currentColor для использования значения цвета, установленного через CSS.