Icons

Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as Font Awesome. They work superbly together.

This keeps Shoelace light and makes it more customizable.

Font Awesome

You can load Font Awesome locally or via CDN. To use the CDN version, add this to the <head> section of your page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Then add icons as you normally would with <i class="fa fa-*"></i>:

For your convenience, here’s a full list of icons available in Font Awesome.