Update svgIcon component attribute after clicking

Question

I've made custom svgIcon component from SLDS tutorial to use icons in my Lightning components and apps.

I want to write controller that updates "svgPath" attribute after clicking, so my picture of my icon will change. I've impleneted var with my svgIcon component and used set method for this attribute but it doesn't worked.

<aura:component > 
  <c:svgIcon aura:id="icon" svgPath="/resource/slds213/assets/icons/standard-sprite/svg/‌​symbols.svg#account" category="standard" size="small" name="account" /> 
   <button class="slds-button slds-button--icon" aria-haspopup="true" onclick="{!c.changeIcon}"> 
      <c:svgIcon class="slds-icon-text-default" svgPath="/resource/slds213/assets/icons/utility-sprite/svg/s‌​ymbols.svg#down" category="utility" size="xx-small" name="down" /> 
   </button> 
 </aura:component >

Controller class

({ changeIcon : 
      function(cmp) { 
       var item = cmp.find('icon'); 
       item.set("v.svgPath", "/resource/slds213/assets/icons/standard-sprite/svg/symbols.‌​svg#user"); 
      } 
 })

Do you have any suggestions?

Answer 1

Again the easiest way to do it is to use lightning:Icon from winter 17 release. Reference : lightning:Icon. This component will give you access to almost all the common svg icons used in the standard lightning design libraries ( includes action, custom, standard and utitly icons ) and also it gives you control over the size and variants.

So the implementation goes something like follows

As mentioned earlier this would work well for almost all lightning design system icons. However if you want to use custom svg icons, then you must implement a custom implementation like follows

Reference : Custom Svg Icons using Renderer Methods

If you notice this version of svg icon custom component uses helper methods to render the svg icon and append it to the DOM element and it returns this.superRender() as recommended in the documents below

Reference : Renderer Life Cycle