Use icons in stencil

Demo of how to use icon libraries in stenciljs

Getting Started

To try this demo, clone this repo to a new directory:

git clone https://github.com/drygnet/stenciljs-icons-example.git 
cd stenciljs-icons-example
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

Three approaches

FontAwesome

... uses the downloaded all.min.cssthat expects the font-files to be in the webfonts-directory on the server, look at the copy-block in stencil.config.js

Material Icons

... has all the CSS that is needed included in the component, the same webfonts-directory is used for simplicity

Office UI Fabric Icons

... uses the downloaded fabric-icons-inline.css that contains all the CSS and the actual font.

Extra files in assets-directory

Not all files in the assets directory are needed, just the ones referenced in the components and the font files that are copied via stencil.config.js I kept the files if you e.g. don't need the brand-icons in FontAwesome (replace all.min.css with the CSS you need in the component) or if you want to change the Material Icons implementation to use copied webfonts.