Theme for mat icons updated

src/app/components/project-map/nodes-menu/nodes-menu.component.html

@@ -4,7 +4,7 @@
     (click)="startConsoleForAllNodes()"
     class="menu-button"
     >
-    <mat-icon>web_asset</mat-icon>
+    <mat-icon class="unmarked">web_asset</mat-icon>
 </button>
 <button
     matTooltip="Start/Resume all nodes"
@@ -12,7 +12,7 @@
     (click)="startNodes()"
     class="menu-button"
     >
-    <mat-icon>play_arrow</mat-icon>
+    <mat-icon class="unmarked">play_arrow</mat-icon>
 </button>
 <button
     matTooltip="Suspend all nodes"
@@ -20,7 +20,7 @@
     (click)="suspendNodes()"
     class="menu-button"
     >
-    <mat-icon>pause</mat-icon>
+    <mat-icon class="unmarked">pause</mat-icon>
 </button>
 <button
     matTooltip="Stop all nodes"
@@ -28,7 +28,7 @@
     (click)="stopNodes()"
     class="menu-button"
     >
-    <mat-icon>stop</mat-icon>
+    <mat-icon class="unmarked">stop</mat-icon>
 </button>
 <button
     matTooltip="Reload all nodes"
@@ -36,5 +36,5 @@
     (click)="reloadNodes()"
     class="menu-button"
     >
-    <mat-icon>replay</mat-icon>
+    <mat-icon class="unmarked">replay</mat-icon>
 </button>

src/app/components/project-map/nodes-menu/nodes-menu.component.scss

@@ -10,3 +10,11 @@
     border: none;
     background-color: transparent;
 }
+
+.unmarked {
+    color: white!important;
+}
+
+.marked {
+    color: #0097a7!important;
+}

src/app/components/project-map/project-map-menu/project-map-menu.component.html

@@ -2,9 +2,8 @@
     matTooltip="Add a note"
     mat-icon-button
     class="menu-button"
-    [color]="drawTools.isTextChosen ? 'primary' : 'basic'"
     (click)="addDrawing('text')">
-    <mat-icon>create</mat-icon>
+    <mat-icon [ngClass]="{unmarked: !drawTools.isTextChosen, marked: drawTools.isTextChosen}">create</mat-icon>
 </button>
 <input
     type="file"
@@ -17,23 +16,21 @@
     mat-icon-button
     class="menu-button"
     (click)="file.click()">
-    <mat-icon>image</mat-icon>
+    <mat-icon class="unmarked">image</mat-icon>
 </button>
 <button
     matTooltip="Draw a rectangle"
     mat-icon-button
     class="menu-button"
-    [color]="drawTools.isRectangleChosen ? 'primary' : 'basic'"
     (click)="addDrawing('rectangle')">
-    <mat-icon>crop_3_2</mat-icon>
+    <mat-icon [ngClass]="{unmarked: !drawTools.isRectangleChosen, marked: drawTools.isRectangleChosen}">crop_3_2</mat-icon>
 </button>
 <button
     matTooltip="Draw an ellipse"
     mat-icon-button
     class="menu-button"
-    [color]="drawTools.isEllipseChosen ? 'primary' : 'basic'"
     (click)="addDrawing('ellipse')">
-    <mat-icon>panorama_fish_eye</mat-icon>
+    <mat-icon [ngClass]="{unmarked: !drawTools.isEllipseChosen, marked: drawTools.isEllipseChosen}">panorama_fish_eye</mat-icon>
 </button>
 <button 
     matTooltip="Draw a line" 
@@ -53,9 +50,8 @@
     matTooltip="Lock or unlock all items"
     mat-icon-button
     class="menu-button"
-    [color]="isLocked ? 'primary' : 'basic'"
     (click)="changeLockValue()">
-    <mat-icon>lock</mat-icon>
+    <mat-icon [ngClass]="{unmarked: !isLocked, marked: isLocked}">lock</mat-icon>
 </button>
 <button
     matTooltip="Take a screenshot"
@@ -63,7 +59,7 @@
     class="menu-button"
     (click)="takeScreenshot()"
     >
-    <mat-icon>photo_camera</mat-icon>
+    <mat-icon class="unmarked">photo_camera</mat-icon>
 </button>
 <app-drawing-added
   [server]="server"

src/app/components/project-map/project-map-menu/project-map-menu.component.scss

@@ -22,3 +22,11 @@ mat-divider.divider {
 .non-visible {
     display: none;
 }
+
+.unmarked {
+    color: white!important;
+}
+
+.marked {
+    color: #0097a7!important;
+}

src/app/components/project-map/project-map.component.html

@@ -146,14 +146,14 @@
   </div>
 
   <div id="show-menu-wrapper" [ngClass]="{ shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
-    <button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon>keyboard_arrow_right</mat-icon></button>
+    <button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon class="unmarked">keyboard_arrow_right</mat-icon></button>
   </div>
 
   <div id="menu-wrapper" [ngClass]="{ extended: isProjectMapMenuVisible }">
     <app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
     <mat-divider class="divider" [vertical]="true"></mat-divider>
     <app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
-    <button class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon>keyboard_arrow_left</mat-icon></button>
+    <button class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon class="unmarked">keyboard_arrow_left</mat-icon></button>
   </div>
 
   <app-context-menu [project]="project" [server]="server"></app-context-menu>

src/app/components/project-map/project-map.component.scss

@@ -93,6 +93,14 @@ mat-divider.divider {
   color: gray;
 }
 
+.unmarked {
+  color: white!important;
+}
+
+.marked {
+  color: #0097a7!important;
+}
+
 #zoom-buttons {
   position: fixed;
   background: #263238;

src/theme-light.scss

@@ -38,13 +38,6 @@ $theme: map-merge(
   )
 );
 
-@mixin mat-button-theme($theme) {
-  .mat-button, .mat-icon-button, .mat-stroked-button {
-    color: white;
-    background: transparent;
-  }
-}
-
 @include mat-core-theme($theme);
 @include mat-autocomplete-theme($theme);
 @include mat-button-theme($theme);