How to dynamically replace svg icon with another svg icon in angular JS?

Issue

I am using dedicated framework where the only possibility to call the svg icon is by putting the path to the icon i.e.:

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       svg-icon="common/icons/cmdStop24.svg"
       sit-name="customcommand.stop"
       sit-tooltip={{vm.btnBlockText}}
       ng-click="vm.blockButtonHandler"
       sit-label={{vm.btnBlockText}}
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>

I am courious if there is possiblity to dynamically replace the icon with another one. I have tried to put reference to a variable and change its path from the angular side, but even though the path changes, the icon is not replaced.

svg-icon={{vm.blockIconPath}}

if (item.BlockNewWorkOrder == true) 
   self.blockIconPath = "common/icons/cmdSubmit24.svg"; 
else 
   self.blockIconPath = "common/icons/cmdStop24.svg";

Is it because the svg icons are loaded at the begining of page life-cycle?

Additional context from Framework's documentation center:

name	type	description
svg-icon	string	SVG icon to be displayed for the command button.
cmd-icon	string	Command svg icon to be displayed for the command button. This is used only if the svg-icon is not provided.
sit-icon	string	One or more CSS classes corresponding to the icon to display for the command button. This is used only if both svg-icon and cmd-icon are not specified. (default: fa-cogs)

Solution

If you have only 2 conditions then you can simply use ng-if like this:

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       ng-if="vm.BlockNewWorkOrder"
       svg-icon="common/icons/cmdSubmit24.svg"
       sit-name="customcommand.stop"
       sit-tooltip={{vm.btnBlockText}}
       ng-click="vm.blockButtonHandler"
       sit-label={{vm.btnBlockText}}
       ng-show="vm.isButtonVisible"></sit-command>
    <sit-command 
       ng-if="!vm.BlockNewWorkOrder"
       svg-icon="common/icons/cmdStop24.svg"
       sit-name="customcommand.stop"
       sit-tooltip={{vm.btnBlockText}}
       ng-click="vm.blockButtonHandler"
       sit-label={{vm.btnBlockText}}
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>

Answered By - AvgustinTomsic