Feathericons NPM package buggy with meteor rendering

https://github.com/feathericons/feather

I’m using this package for icons and such, but there’s one really big issue. The icons don’t always show up after templates have been rendered. I know I can fix this by including feather.replace() in every single template, but that’s just… too hardcore.

I’ve tried using the global template render package to do this:

Template.onRendered(function() {
    setTimeout(function() { // we need to give it a timeout or it won't load properly
        feather.replace();
    }, 100);
});

I’ve tried including this code in client/main.js, my body.js etc but I can’t seem to find a permanent solution to my issue with it. Would be really appreciated if anyone could tell me how I can make sure feather icons always load, no matter what template is being rendered, when it’s being rendered etc.

You have a couple options as far as I can see.

  1. Create a template that encapsulates the icon and handles calling the replace method, and then use it wherever you want an icon.

  2. Create a template that contains an svg which uses the svg sprite as detailed in the feather docs thus negating the need for calling the replace method, and then use it wherever you want an icon.