Font-awesome: Usage with Web Components

[abenz1267]

Hi,

is it possible to use Fontawesome with Web Components? I can't get it working. For example with LitElement:

import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { fal, faArrowUp } from "@fortawesome/pro-light-svg-icons";
import { LitElement, html, customElement } from "lit-element";

@customElement("my-component")
class MyComponent extends LitElement {
    constructor() {
        super();

        library.add(fal, faArrowUp);

        dom.watch();
    }

    render() {
        return html`
            <i class="fal fa-arrow-up"></i>
        `;
    }
}

The <i> tag inside the render function won't be replaced by the appropriate icon. Any solution to this?

Regards

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Sorry, I can't help on this. Waiting for feedback from the community

import { fal, faArrowUp } from "@fortawesome/pro-light-svg-icons";

This doesn't look correct to me. It means that you are importing all icons in the set and faArrowUp, which is already in all icons. Anyway, this is not the problem here

Ref: https://fontawesome.com/how-to-use/with-the-api/setup/importing-icons#icon-names

[abenz1267]

I actually solved this. I stumbled across this documentation: https://fontawesome.com/how-to-use/with-the-api/methods/dom-watch

So you gotta do

// @ts-ignore <-- if you use typescript
dom.watch({
  autoReplaceSvgRoot: this.shadowRoot,
  observeMutationsRoot: this.shadowRoot
})

I hope this helps someone else besides me.

Regards