Add FontAwesome Icons to Buttons

lib/app_component.dart

@@ -5,7 +5,8 @@ import 'package:rules_of_living/src/App.dart';
 
 @Component(
   selector: 'my-app',
-  templateUrl: "app_component.html"
+  templateUrl: "app_component.html",
+  directives: [coreDirectives]
 )
 class AppComponent implements OnInit {
   var name = "World";
@@ -32,10 +33,17 @@ class AppComponent implements OnInit {
   void onStartClicked() {
     bool isRunning = !engine.running;
     engine.running = isRunning;
+  }
 
     switch (isRunning) {
       case true: buttonRunText = "Stop"; break;
       case false: buttonRunText = "Start"; break;
     }
+  void onStepClicked() {
   }
+
+  void onResetClicked() {
+  }
+
+  void onRandomClicked() {}
 }

lib/app_component.html

@@ -1,14 +1,20 @@
 <h1>Cellular Automata - The Rules of Life</h1>
 <div id="rules-input">
     Ruleset: <input type="text" title="ruleset" content="S23/B3">
+    <i class="fas fa-paint-brush"></i>
 </div>
 <div id="output">
     <canvas #caCanvas width="500" height="500"></canvas>
 </div>
 <div id="controls">
-    <button id="run" (click)="onStartClicked()">{{buttonRunText}}</button>
-    <button id="step">Step</button>
-    <button id="reset">Reset</button>
-    <button id="random">Random</button>
-    Speed: <input type="text" title="speed" value="1">
+    <button id="run" (click)="onStartClicked()">
+        <span [ngSwitch]="engine.running">
+            <i *ngSwitchCase="false" class="fas fa-play"></i>
+            <i *ngSwitchCase="true" class="fas fa-stop"></i>
+        </span>
+    </button>
+    <button id="step" (click)="onStepClicked()"><i class="fas fa-step-forward"></i></button>
+    <button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button>
+    <button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button>
+    <i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
 </div>

web/index.html

@@ -17,6 +17,9 @@
   <link rel="stylesheet" href="styles.css">
   <link rel="icon" type="image/png" href="favicon.png">
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
+
   <script defer src="main.dart.js"></script>
 </head>