How to use Font Awesome with Polymer LitElement

There is material icons in Polymer material library and the solutions used there helped me to solve the font awesome problem.

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="module" src="./src/components/fa-icon.js"></script>
  <title>Font Awesome test</title>
</head>
<body>
  <h1>Hello world! <fa-icon iclass="far fa-thumbs-up"></fa-icon>
</body>
</html>

fa-icon.js: 

import { LitElement, html } from '@polymer/lit-element';
import { FaStyles } from './css/fontawesome-all.css.js';

export class FaIcon extends LitElement {
  static get properties() {
    return {
      iclass: String
    }
  }
  constructor() {
    super();
    this.iclass="";
    const fontEl = document.createElement('link');
    fontEl.rel = 'stylesheet';
    fontEl.href = 'https://use.fontawesome.com/releases/v5.0.13/css/all.css';
    document.head.appendChild(fontEl);
  }
  _render({ iclass }) {
    return html`${FaStyles}<i class$="${iclass}"></i>`;
  }
}
customElements.define('fa-icon', FaIcon);

And then you need to customize font awesome css-file. Download the css and rename it with ".js". Modify the file.

css/fontawesome-all.css.js:

import { LitElement, html } from '@polymer/lit-element';

export const FaStyles = html`
<style>

... the file's original content here ...

  </style>
`;

And then you must replace all '\' with '\\'. Example:

.fa-yahoo:before {
  content: "\f19e"; }

after replacement:

.fa-yahoo:before {
  content: "\\f19e"; }

try https://www.npmjs.com/package/fa-icons , this module is based in LitElement

Tags:

Font Awesome

Lit Element

Polymer 3.X

Recent Posts