Chaning icon attribute of an individual ng-md-icon which was dynamically created

[karthikcsridhar]

Hi,

I am trying to create a custom accordion with + and - buttons which will animate(with morpheus) on show and hide. Since the elements in the accordion are dynamically created, I am trying to change the individual icon, which resides in the group that was just shown or hidden.

So for this case I am not able to use icon={{scopeVariable}}.

I need to select the individual icon element(which I am doing) and then changing the icon attribute using:
if($('.'+classOfGrp+ptn).css('display') == 'none'){
var myEl = angular.element( document.querySelector( '#'+'ptn-group-icon-'+ptn ) );
myEl.attr('icon',"remove_circle");
}
else{
var myEl = angular.element( document.querySelector( '#'+'ptn-group-icon-'+ptn ) );
myEl.attr('icon',"add_circle");
}

When I inspect the element in Chrome, I could see that the attribute got changed. But nothing happens visually. The default icon stays there even though the icon attribute has changed in the dom.

Please help me with a workaround for my scenario. Thanks a lot.

[urmilparikh]

Please share a plnkr or codepen for this issue.

[urmilparikh]

Closing due to inactivity.