Font Awesome doesn't work inside of a Stencil JS component

Stencil version: @stencil/core@1.3.0

I want to use Font Awesome inside my Stencil component.

I followed these steps from https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

1. Create a "Stencil component starter" project
2. Install Font Awesome: npm install --save-dev @fortawesome/fontawesome-free
3. Reference 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. Add the icon inside my component:

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

I'm not able to include font awesome inside my stencil component. I'm stuck here: <i class="fas fa-camera"></i>

Basically this problem is not only related to font-awesome and stenciljs its a general "custom-font" with "web-components" problem. Here is a link to the thread with working solution. I Tried it out by myself works perfectly.

https://stackoverflow.com/a/57623658/8196542