dees-catalog/ts_web/elements/dees-icon.ts
2020-09-17 10:35:33 +00:00

56 lines
1.4 KiB
TypeScript

import { LitElement, html, property, customElement } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('dees-icon')
export class DeesIcon extends LitElement {
public static demo = () => html`<dees-icon iconName="visibility"></dees-icon>`;
@property()
public iconName: string;
constructor() {
super();
domtools.elementBasic.setup();
}
public render() {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
line-height: inherit;
font-size: inherit;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: inherit;
font-size: inherit;
display: inline-block;
line-height: inherit;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
</style>
<i class="material-icons">${this.iconName}</i>
`;
}
}