Icon in TypeScript

package.json

@@ -14,7 +14,7 @@
     "lint": "npm-run-all --parallel lint:*",
     "test": "karma start --single-run",
     "bootstrap": "npm install && ./scripts/bootstrap.sh",
-    "build": "npm run build-styling && tsc -b packages/base packages/switch packages/ripple packages/button packages/fab",
+    "build": "npm run build-styling && tsc -b packages/base packages/switch packages/ripple packages/button packages/fab packages/icon",
     "build-styling": "./scripts/build-styling.sh",
     "update-gh-pages": "npm run bootstrap && ./scripts/publish-demos.sh"
   },

packages/icon/mwc-icon-css.js

@@ -1,19 +0,0 @@
-/**
-@license
-Copyright 2018 Google Inc. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import {html} from '@polymer/lit-element/lit-element.js';
-
-export const style = html`<style></style>`;

packages/icon/mwc-icon-host-css.js

@@ -1,20 +0,0 @@
-/**
-@license
-Copyright 2018 Google Inc. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import {html} from '@polymer/lit-element/lit-element.js';
-
-export const style = html`<style>:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
-</style>`;

packages/icon/src/mwc-icon.ts

@@ -14,17 +14,25 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import {LitElement, html} from '@polymer/lit-element/lit-element.js';
-import {style} from './mwc-icon-host-css.js';
+import {LitElement, html, customElement} from '@polymer/lit-element/lit-element.js';
+import {style} from './mwc-icon-host-css';
 import './mwc-icon-font.js';
 
+@customElement('mwc-icon' as any)
 export class Icon extends LitElement {
+
   renderStyle() {
     return style;
   }
+
   render() {
     return html`${this.renderStyle()}<slot></slot>`;
   }
+
 }
 
-customElements.define('mwc-icon', Icon);
+declare global {
+  interface HTMLElementTagNameMap {
+    'mwc-icon': Icon;
+  }
+}

packages/icon/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "."
+  },
+  "include": [
+    "src/*.ts"
+  ]
+}