javascript - JavaScript を使用して DOM に挿入された Font-Awesome アイコンは、ページが更新されるまで表示されません。

Question

JSONデータに応じてさまざまなアイコンを選択して挿入するために、Javascriptを使用してページを構成しています。ページが更新されるまで、挿入されたアイコンの 1 つ以上が表示されないことがあります。Firefox はすべてのアイコンで失敗することがわかりましたが、Chrome は更新後に問題ありません。

DOM を調べると、不足している要素が HTML にあることがわかります。

<i id="live-icon" class="fas fa-check fa-2x"></i>

作業要素は次のように示されていますが、

<svg id="airdrop-icon" class="svg-inline--fa fa-times-circle fa-w-16 fa-2x" aria-hidden="true" data-prefix="fas" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
<!-- <i id="airdrop-icon" class="fas fa-times-circle fa-2x"></i> -->

したがって、DOM インジェクションは機能しているように見えますが、font-awesome はそれを svg に展開していません。これはタイミングの問題の可能性がありますか?

CDN バージョンの font-awesome (js および css) とローカルの両方で実行して、それが問題であるかどうかを確認しましたが、そうではありません。

Javascript スニペット

const liveIcon = 'fas fa-check fa-2x';
const notLiveIcon = 'fas fa-times-circle fa-2x';
const liveColor = 'green';
const notLiveColor = 'red'

function SetElementIconById(id, icon) {

  const i = document.getElementById(id);
  i.setAttribute('class', icon);
}

function SetElementColorById(id, color) {
  const span = document.getElementById(id);
  const bg = document.getElementById(id);
  bg.setAttribute('class', bg.getAttribute('class') + ' ' + color);
}

document.addEventListener("DOMContentLoaded", function(event) {

  SetElementColorById('live-color', liveColor);
  SetElementColorById('live-body-color', liveColor + " darken-2")
  SetElementIconById('live-icon', liveIcon);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<!-- Live -->
<div class="col s12 m6 l4">
  <div id="live-color" class="card white-text hoverable tooltipped center-align" data-position="top" data-delay="50" data-tooltip="Live date">
    <div class="card-content vtiny">
      <h5 style="font-weight: 300"><i class="fas fa-heartbeat fa-sm"></i> Live</h5>
    </div>
    <div id="live-body-color" class="card-content vtiny">
      <p><i id="live-icon"></i></p>
    </div>
  </div>
</div>