Font-awesome in Polymer 2 - font-awesome

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 -->

Answer 2

looks like the font-awesome.css gets loaded outside your element, so the shadow dom then hides is so that no document-level CSS can style it.
What works for me in polymer 2 and font-awesome 4.7, is to include the css inside the dom-module:
<dom-module id="demo">
<!-- this is deprecated but still works in v2:
https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#external-stylesheets-->
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<template>
<i class="fa fa-caret-up"></i>
</template>
</dom-module>
Just tested it and works fine in IE (11+), FF, Safari 11, Chrome v53-, but as of Chrome v54 the caret is not properly rendered:
This works ok in Chrome when font-awesome.css is also included in the main document?!