Значки не отображаются с помощью .html ()

Question

Я работаю над простой формой, которая отображает сообщения об ошибках, моя проблема в том, что когда я пытался добавить значок в сообщениях с предупреждениями, значки не отображаются. Я использую feathericons для создания иконок.

Я сделал простой фрагмент, значки отображаются нормально, но когда я отображаю его с помощью jquery, он не работает.

Надеюсь, ты мне поможешь.

спасибо.

$(document).ready(function(){
   feather.replace();
   
   $('button').click(function(){
      $('.alert').html('<i data-feather="activity"></i>');
   });
  
});

<script src="https://unpkg.com/feather-icons@4.10.0/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>show Icon</button>
<div class="alert"></div>
<hr>
<i data-feather="home"></i>
<i data-feather="alert-circle"></i>
<i data-feather="globe"></i>

Answer 1

Попробуйте.

<script src="https://unpkg.com/feather-icons@4.10.0/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>show Icon</button>
<div class="alert"></div>
<hr>
<i data-feather="home"></i>
<i data-feather="alert-circle"></i>
<i data-feather="globe"></i>

<script>
$(document).ready(function(){
   feather.replace();

   $('button').click(function(){
      $('.alert').html('<i data-feather="activity"></i>');
      feather.replace();
   });

});
</script>