How can we use custom SVG icons in Lightning Component with LockerService enabled?

SVG support is coming in the Summer'16 .5 patch scheduled to deploy 1 week from Tuesday. We've been working to verify that libraries like HightCharts, LeafletJS, D3 and other work nicely when running inside a locker.


The issues with the example above are not SVG related - they are because SecureElement.innerText is currently write only for security reasons (the default DOM Element.innerText is a data scraping security vulnerability).

Node.innerText is also a non standard property and is surrounded by controversy:

https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText

http://perfectionkills.com/the-poor-misunderstood-innerText

http://quirksmode.org/dom/html/

http://caniuse.com/#feat=innertext

We recently completed work to add SecureElement.innerHTML read support and will be taking a similar approach to provide innerText and textContent read functionality. This will be released in an upcoming patch to Summer'16.