Can't use with Polymer

[robhunt3r]

I am trying to use SVG + JS with my dom-modules but it is not doing anything.

If I use fontawesome-all.min.js on my main page, it works perfectly with tags outside any Polymer 2 element (for example inside my Body tag) but doesn't work with any Polymer element.

I've also tried to import the JS file inside each of my elements but still same problem, it only finds icons outside shadow-dom... Is there any way to achieve this? I am getting tired of trying everything.

UPDATE:

I got it working now using the API.

I load JS file in my index.html file

Inside my dom-module.js file ready() function I call this

window.FontAwesome.dom.i2svg({ node: this.$.socialLogoIcon});

And it is working now...

My code working with Polymer2 (few changes to make it dynamic) but above code works too if you already have a element.

setLogo(logo = null) {
    const FA = window.FontAwesome;
    if (typeof FA !== 'undefined') {
        const socialIcon = FA.findIconDefinition({prefix: 'fab', iconName: logo.toLowerCase()});
        if (socialIcon) {
            const icon = FA.icon(socialIcon);
            this.$.socialLogoIcon.innerHTML = icon.html;
        }
    }
}

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

@talbs @robmadole I've never used polymer, so I can't help. Does this need to be mentioned in the docs?

[robhunt3r]

I actually would love to see this in the docs, because I spent 2 days looking to how to make it work haha

Now I am really happy, because it works smoothly and I can switch on-the-fly my icons without changing attribute values in canvas, I updated with full code I am using to make it work.