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.