[SalesForce] How to use custom SVG icons in Lightning Component with LockerService enabled

I'm trying to use a custom SVG icon in a Lightning Component (not part of SLDS pre defined icons). I've put the SVG icon in following manner:

MyTestApp.cmp

<aura:component >
    <div aura:id="svg_content">
    <![CDATA[
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
            <symbol id="pause" viewBox="0 0 10240 10240">
                <path d="M6400 1280l1280 0c353,0 640,288 640,640l0 6400c0,352 -288,640 -640,640l-1280 0c-352,0 -640,-288 -640,-640l0 -6400c0,-353 287,-640 640,-640z"/>
                <path d="M2560 1280l1280 0c353,0 640,288 640,640l0 6400c0,352 -288,640 -640,640l-1280 0c-352,0 -640,-287 -640,-640l0 -6400c0,-353 287,-640 640,-640z"/>
            </symbol>
        </svg>
    ]]>
    </div>
</aura:component>

MyTestAppRenderer.js

({
    afterRender: function(component, helper) {
        var svg = component.find("svg_content");
        var svgDiv = svg.getElement();
        var val = svgDiv.innerText;
        if (typeof val !== 'undefined') {
            val = val.replace("<![CDATA[", "").replace("]]>", "");
            svgDiv.innerHTML = val;
        }
    }
})

This does not work now if LockerService is enabled. I'm always getting svgDiv.innerText as undefined.

How can I use custom SVG icons in Lightning now, is there any other way I could use them without using renderer.js way?