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.

Which icon library are you using? I would guess that you're missing an initialisation call as the content is appended after the DOM loads. — Rory McCrossan, May 17 '21 at 15:29
Ah ok, I think I see what you mean. I'm using the feather icons library, so I presume you mean I need to initialise it in the .js file. Let me give that a go. — IWasMakavelli1, May 17 '21 at 15:31
Thanks for confirming. From the [documentation](https://github.com/feathericons/feather#4-replace) it appears you just need to call `feather.replace()` *after* your `for` loop completes. — Rory McCrossan, May 17 '21 at 15:33
Yep that was it. Thank you so much, not quite sure how that's solved it yet, but will read up about what it means for the DOM to load. Thank you Rory. — IWasMakavelli1, May 17 '21 at 15:34

score 0 · Accepted Answer · answered May 17 '21 at 15:36

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

jQuery append issue: no icons

1 Answers1