Custom icon element

i-con.js

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

const icons = {
	code: 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z',
	home: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z',
	mail: 'M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z',
	menu: 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z',
	polymer: 'M19 4h-4L7.11 16.63 4.5 12 9 4H5L.5 12 5 20h4l7.89-12.63L19.5 12 15 20h4l4.5-8z'
};

class ICon extends LitElement {
	static properties = {
		name: {type: String}
	};

	render() {
		return html`
			<style>
				:host {
					display: inline-block;
					width: 24px;
				}
			</style>

			<svg width="24" height="24" fill="red">
				<path d="${icons[this.name]}"></path>
			</svg>
		`;
	}
}

customElements.define('i-con', ICon);

Usage:

<i-con name="mail"></i-con>

You can find more SVG paths at https://poly-icon.appspot.com