Add support for scss

package.json

@@ -31,7 +31,10 @@
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "clang-format": "~1.0.55",
     "codelyzer": "~4.0.1",
+    "concurrently": "~3.4.0",
+    "google-closure-compiler": "~20171023.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -40,14 +43,11 @@
     "karma-coverage-istanbul-reporter": "~1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "~0.2.2",
+    "lite-server": "2.3.0",
     "protractor": "~5.1.2",
+    "source-map-explorer": "~1.5.0",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
-    "clang-format": "~1.0.55",
-    "concurrently": "~3.4.0",
-    "google-closure-compiler": "~20171023.0.1",
-    "lite-server": "2.3.0",
-    "source-map-explorer": "~1.5.0",
     "typescript": "~2.4.2"
   },
   "engines": {

src/app/frontend/chrome/component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import {Component, Inject} from '@angular/core';
+import {MatIconRegistry} from "@angular/material";
+import {DomSanitizer} from "@angular/platform-browser";
 
 @Component({
   selector: 'kd-chrome',
@@ -8,6 +10,13 @@ import { Component } from '@angular/core';
 export class ChromeComponent {
   title = 'app';
 
+  constructor(
+    @Inject(MatIconRegistry) iconRegistry: MatIconRegistry,
+    @Inject(DomSanitizer) sanitizer: DomSanitizer) {
+    iconRegistry.addSvgIcon('kd-logo',
+      sanitizer.bypassSecurityTrustResourceUrl('assets/images/kubernetes-logo.svg'));
+  }
+
   getOverviewStateName() {
     return 'someName';
   }

src/app/frontend/chrome/module.ts

@@ -3,29 +3,30 @@ import {ChromeComponent} from './component';
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {
-    MatButtonModule, MatIconModule, MatIconRegistry, MatProgressSpinnerModule, MatToolbarModule,
-    MatTooltipModule
+  MatButtonModule, MatIconModule, MatIconRegistry, MatProgressSpinnerModule, MatToolbarModule,
+  MatTooltipModule
 } from '@angular/material';
 import {FlexLayoutModule} from "@angular/flex-layout";
+import {HttpClientModule} from "@angular/common/http";
 import {PipesModule} from "../common/pipes/module";
 
-
 @NgModule({
-    declarations: [
-        ChromeComponent
-    ],
-    imports: [
-        BrowserModule,
-        MatToolbarModule,
-        MatIconModule,
-        MatTooltipModule,
-        MatButtonModule,
-        MatProgressSpinnerModule,
-        FlexLayoutModule,
-        PipesModule
-    ],
-    providers: [MatIconRegistry],
-    bootstrap: [ChromeComponent]
+  declarations: [
+    ChromeComponent
+  ],
+  imports: [
+    BrowserModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatButtonModule,
+    MatProgressSpinnerModule,
+    FlexLayoutModule,
+    HttpClientModule,
+    PipesModule
+  ],
+  providers: [MatIconRegistry],
+  bootstrap: [ChromeComponent]
 })
 export class ChromeModule {
 }

src/app/frontend/chrome/template.html

@@ -19,7 +19,7 @@
     <div class="kd-logo-bar">
       <a href="{{getOverviewStateName()}}"
          class="kd-toolbar-logo-link">
-        <mat-icon svgIcon="assets/images/kubernetes-logo.svg"
+        <mat-icon svgIcon="kd-logo"
                  class="kd-toolbar-logo">
         </mat-icon>
         <mat-icon svgIcon="assets/images/kubernetes-logo-text.svg"

src/app/frontend/index.html

@@ -24,7 +24,6 @@
   <link rel="icon"
         type="image/png"
         href="assets/images/kubernetes-logo.png"/>
-  <link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>
   <meta name="viewport"
         content="width=device-width">
 </head>

tsconfig.json

@@ -6,7 +6,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./.tmp/out-tsc",
-    "sourceMap": false,
+    "sourceMap": true,
     "module": "es2015",
     "moduleResolution": "node",
     "noImplicitAny": true,
@@ -20,11 +20,5 @@
       "es2017",
       "dom"
     ]
-  },
-  "exclude": [
-    "vendor",
-    "node_modules",
-    "built",
-    "dist"
-  ]
+  }
 }