Как сделать так, чтобы значок .svg реагировал на отключенное состояние и менял его цвет?

Question

В основном, когда состояние значка активно, мы должны показывать .svg icon #1, а когда оно отключено, мы должны показывать .svg icon #2 (в основном, отображать один из этих двух в любой момент времени в зависимости от состояния кнопки-значка).

Проблема в том, что это пользовательский файл .svg, поэтому мне нужно использовать Angular 1.x и md-svg-icon="path\...\icon.svg", и в идеале я хотел бы добавить только 1 значок в статический импорт, а затем изменить fill: white как свойство css. (Я нашел это в других связанных вопросах), но здесь вы можете видеть, что я не могу использовать заливку для всей картинки (одна часть должна оставаться красной, только другая должна изменить цвет), что усложняет решение.

Другой вариант, о котором я думал, это подключить его с помощью директивы ng-style (и некоторого флага isIconDisabled к контроллеру) и добавить оба этих значка в статический импорт, а затем отобразить 1-й или другой. Имеет ли это смысл? К сожалению, у меня нет такого большого опыта работы с AngularJS.

Answer 1

Вы можете изменить внешний вид вашего значка, установив стиль определенных элементов вашего значка SVG. Но это будет немного хлопотно и неудобно, как только значок изменится в будущем.

Я бы выбрал второй вариант и использовал флаги для управления значком для состояний. В основном вы просто переключаете значок с состоянием вашего элемента (например, кнопки):

<button ng-click="doSmth()" ng-disabled="btnDisable">
  <img ng-src="{{activeButtonIconURL}}" ng-if="!btnDisable">
  <img ng-src="{{disabledButtonIconURL}}" ng-if="btnDisable"> 
</button>

Вот рабочий поршень из приведенного выше примера.