How to integrate Font Awesome inside Stenciljs

Stencil version:


I want to use font awesome inside my Stencil component.

I followed these steps

1 - Create a “Stencil component starter” project

2 - Install fontawesome npm install --save-dev @fortawesome/fontawesome-free

3 - I’ve referenced font awesome inside src/index.html

<script src="../node_modules/@fortawesome/fontawesome-free/css/all.css"></script>
    <script src="../node_modules/@fortawesome/fontawesome-free/js/all.js"></script>

4 - I’ve added the icon inside my component

  render() {
    return (
        <i class="fas fa-camera"></i>

5- <i class="fas fa-camera"></i>

I’m not able to include font awesome inside my stencil component. I’m stuck here.

I made a demo repo for using icons in stenciljs here:

Example components with different approaches for:
FontAwesome, Office UI Fabric and Material Icons

without inserting anything on index.html (my use case does not allow it and i like my components “self-contained”)

with Stenciljs 1.9, was ok to embed all.css into styleUrls, with migration to 1.16, all.css stopped to work, have include right to css file