font awesome SVG icons doesn't work on safari (iOS)

Question

I have following font awesome reference

<link href="css/fontawesome-free-5.12.1-web/css/all.css" rel="stylesheet">     
<script defer src="css/fontawesome-free-5.12.1-web/js/all.js"></script>

Alternatively I also have premium kit reference

<script src="https://kit.fontawesome.com/7xxxx.js" crossorigin="anonymous"></script>

Both references renders icons on Google Chrome, but fails to work on Safari (iOS) Console error says

NoModificationAllowedError: The object can not be modified

Here is the code all.js fontawesome library that is having issues

if (node.parentNode && node.outerHTML) {
         node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');
      } else if (node.parentNode) {
        var newNode = document.createElement('span');
        node.parentNode.replaceChild(newNode, node);
        newNode.outerHTML = newOuterHTML;
      }

How can I make this work for safari?

node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');

Answer 1

For some reason font-awesome <i> tag with font-awesome class inside SVG works on Chrome but not on safari.

So I had to replace my code

Old code:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 900)
.append("i")
            .attr("class", ({ property }) => {
                const styleClass = getIconClass({ property})
                return styleClass
            })

Replaced to:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 900);

var y = 70;
var x=10;
["\uf083", "\uf0c2", "\uf7ad", "\uf738", "\uf185"].forEach(function(code, i) { 
    svg.append("text")
  .attr("x",x)
  .attr("y",y)
  .attr("style", "font-family: 'Font Awesome 5 Pro'; font-weight: 900; ")
  .attr('font-size', function(d) { return '70px';} )
  .text(function(d) { return  code; }); 
    y+=70;
    x+=70;
});

JS Fiddle