In the backend (wordpress) I have the user select an icon, then that outputs a string of text. I use the .icons class to search over all the icons and replace what strings it finds with the corresponding svg. It works great, but in IE9/10 the load function doesn't work and the string does not get replaced.
I have read that other people have had a similiar problem, but when trying to implement a similar fix, none work and the string still gets outputed [ CSS Tricks, Another Stack Question ].
I haven't had any luck so far so was wondering if anyone could give me better insight.
JS / JQuery
function icons() {
$('.icons').each(function() {
var counter = 0;
var select = $(this).html();
var url = location.origin;
var path = "/wp-content/themes/Proxy-Engine/dist/assets/icons/svg/";
var ext = ".svg";
var icon = url+path+select+ext;
$(this).load(icon, null, function() {
$('.icons svg g').removeAttr('stroke');
});
var loc = location.origin;
$(this).html(select)
});
}
IE9/10 does not support window.location.origin. I removed url from var icon, and made it a relative path.
Thanks everyone for the help.
function icons() {
$('.icons').each(function() {
var counter = 0;
var select = $(this).text();
var path = "/wp-content/themes/Proxy-Engine/dist/assets/icons/svg/";
var ext = ".svg";
var icon = path+select+ext;
$(this).load(icon, function() {
$('.icons svg g').removeAttr('stroke');
});
});
}