Font-awesome in Polymer 2

Question

I would like to use fontawesome icons. I have the following webcomponent but icons are not shown:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<dom-module id="mi-icono">
  <template>
    <i class="fas fa-address-card"></i>
    <i class="fas fa-trash-alt"></i>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class MiIcono extends Polymer.Element {
      static get is() { return 'mi-icono'; }
      static get properties() {
        return {};
      }
    }

    window.customElements.define(MiIcono.is, MiIcono);
  </script>
</dom-module>

Anyone knows why icons are not shown?

Answer 1

First, create a style import file: (import.html)

<link rel="import"      href="../../bower_components/polymer/polymer-element.html">
<link rel="stylesheet"  href="css/fa-regular.min.css">

<dom-module id="font-awesome">
  <template>
    <style>
      <!-- TODO: Paste contents of fontawesome-all.css here! -->
      <!-- TODO: Update paths in pasted content to match directory structure -->
      <!-- Would be awesome to use @import here but it doesn't work? -->
    </style>
  </template>
</dom-module>

Now you can import the file in your application:

<link rel="import" href="../../lib/fontawesome-5.0.6/import.html">

Be sure to include the import anywhere you want to use the icons:

<dom-module id="my-super-cool-polymer-app">
  <template>
    <style include="font-awesome">
      <!-- etc -->