jQuery append issue: no icons

Question

I'm working on my first jQuery page and for that I fetch the results from a server and then populate a list with the elements. Before I tried to fetch I just mocked the server call and tried to run the jQuery append in a for loop as below:

for (var j = 0; j < 9; j++) {
  // TODO: FILL THE  LIST ELEMENTS and fix icons.
  $("#active-items-tab").append(
    `<div class="list-view-item">
      <div class="list-view-item-inner">
        <div class="meta-left">
        </div>
        <div class="meta-right">
          <div class="buttons">
            <button class="button h-button is-primary is-outlined is-raised">
              <i data-feather="edit"></i>
            </button>
            <button class="button h-button is-primary is-outlined is-raised">
              <i data-feather="dollar-sign"></i>
            </button>
          </div>
        </div>
      </div>
    </div>`
  );
}

The element is shown correctly 9 times however the icons don't appear at all. Before when I had it just copied and pasted several times in the HTML the icons appeared correctly. I have checked to see if I'm missing any quotations and don't believe so since it's just copied and pasted from where I had it in the HTML before.

Is it possible that the iteration is interfering? I thought the variable name i might be interfering so changed to j but no success yet.

Answer 1

According to the documentation for Feather Icons, you need to call the replace() method after you add a new <i /> icon element to the DOM. As such you need to add this line after your for loop completes:

for (var j = 0; j < 9; j++) {
  $("#active-items-tab").append(/* html here... */);
}

feather.replace(); // display the icons