通过角度8中的css更改svg（图标）的颜色答案

【问题标题】：Change color of svg ( icon) via css in angular 8通过角度8中的css更改svg（图标）的颜色
【发布时间】：2020-04-16 00:54:35
【问题描述】：

我使用 svg 图标并尝试更改图标的颜色，但它不起作用。

但是当我在文件中显式更改图标时，它会起作用（填充：'红色）。

这是我在 assets 文件夹中的 svg 文件：

<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
    <path fill="#00A1DE" fill-rule="nonzero" stroke="#00A1DE" d="M21.708 10.77H12.23V1.293a.73.73 0 0 0-1.458 0v9.479H1.29a.73.73 0 0 0 0 1.458h9.48v9.48a.73.73 0 1 0 1.458 0v-9.48h9.48a.73.73 0 1 0 0-1.458z"/>
</svg>

样式文件夹文件中图标文件夹内的icons.scss：

.icon {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
}

.plus {
  content: url('/assets/images/icons/plus.svg');
}

我像这样使用component.html中的图标：

 <i class="icon plus"></I>

我尝试在 component.css 中编辑颜色：

.icon {
  position: relative;
  bottom: 2px;
  color: green
}

位置和底部有效，但颜色仅更改框背景我需要更改图标颜色而不是背景。谢谢

【问题讨论】：

标签： angular svg

【解决方案1】：

您可以使用 css 的 .filter 来更改 svg 的外观。您不能直接更改 svgs。

.icon{
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

【讨论】：

【解决方案2】：

你可以使用CSS Variables:

<svg id="plus" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1 8H15" stroke="var(--icon-color, #fff)"/>
  <path d="M8 1L8 15" stroke="var(--icon-color, #fff)"/>
</svg>

CSS：

.icon {
    --icon-color: red;
}

适用于和 SVG 图标集

【讨论】：