How to dynamically add svg icons in lighting?

Question

My case scenario is, I'm creating a list element dynamically which displays few contact names. Besides this I want to display the Account svg icon of slds too. I was wondering if it is possible to create a svg tag dynamically and then pass the parameters to it.

let ispan2   = document.createElement('span');
        ispan2.className = 'slds-icon_container slds-icon-standard-'+parentObj;
        ispan2.id    = 'sssssssssssssssd';
        let svg      = document.createElement('svg');
        let use      = document.createElement('use');
        let link     = document.createElementNS("http://www.w3.org/2000/svg", "a");
        //let profUrl  = {!URLFOR('$Asset.SLDS') + 'assets/icons/utility-sprite/svg/symbols.svg#account'};
        //link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href',profUrl);
        //link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href',{!URLFOR($Asset.SLDS, assets/icons/utility-sprite/svg/symbols.svg#account)});
        /*link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href',$A.get('$Asset.SLDS, assets/icons/utility-sprite/svg/symbols.svg#account'));*/

        //link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href', '/apexpages/slds/latestassets/icons/utility-sprite/svg/symbols.svg#account');
        //link.setAttributeNS('http://www.w3.org/2000/xhtml', 'xlink:href',"{URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#account')}");
        use.appendChild(link);
        svg.appendChild(use);
        ispan2.appendChild(svg);

Now the problem here in all of the commented and uncommented code is I think I cannot get the proper URL for the icons. I tried to use the image tag too to get the icon but that too failed.

/*let image = document.createElement('img');
        image.src   = {!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#account')} ;
        //image.src = profUrl;
        ispan2.appendChild(image);*/

The above code works in VisualForce pages as it gets proper URL from $Assest.SLDS, but the same doesn't works in the lighting.

PS: One solution that I thought was to create a new component dynamically and then add lightning:icon tag in it and append this component to the list tag, but I think it's not righteous to create a new component just for icons.

Answer 1

For simple SLDS, use lightning:icon.

$A.createComponents([["lightning:icon",{iconName:"standard:account"}]],
  function(components) { component.set("v.body", components); });

I haven't found any legitimate way to render SVGs using the use attribute; I believe it's currently filtered/blacklisted as a security restriction. You can use other elements, like path, rect, etc if you wanted to render icons that are not in the library, for example, how I rendered a lightning:progressRing.