Цвет заливки SVG-иконки, CSS свойство currentColor

<button class="cx-button">
  <svg class="cx-btn-icon">
    <use xlink:href="/cx-icons.cdn.svg#cx-icon-bell_16x16"></use>
  </svg>
  View notification
</button>

SVG-иконки замечательны тем, что их стиль можно настроить с помощью CSS. Чтобы установить цвет заливки иконке, в свойстве fill укажите такое же значение, как в color у кнопки, внутри которой она находится.

.cx-button {
  color: #000000;
  fill: #000000;
}
.cx-button:hover {
  color: #0061DF;
  fill: #0061DF;
}
.cx-button:active {
  color: #0038AC;
  fill: #0038AC;
}

Вместо того, чтобы дублировать color и fill, можно установить fill: currentColor. Достаточно установить currentColor в состоянии по умолчанию, и оно будет каскадно включаться вместе с псевдо-селекторами, так:

.cx-button {
  color: #000000;
  fill: currentColor;
}
.cx-button:hover {
  color: #0061DF;
}
.cx-button:active {
  color: #0038AC;
}

Un-repeat SVG icon fill with currentColor