New icons

src/assets/stylesheets/2d-hud.scss

@@ -54,9 +54,8 @@
     background-color: rgba(79, 79, 79, 0.2);
     z-index: 1;
 
-    :local(.icon-button) {
+    :local(.iconButton) {
       margin-top: 4px;
-      background-color: $hud-panel-background;
     }
   }
 }
@@ -165,22 +164,40 @@
 }
 
 :local(.iconButton.share_camera) {
-  background-image: url(../hud/share_camera.png);
+  background-image: url(../hud/share_camera_off.png);
 }
 :local(.iconButton.share_camera:hover) {
-  background-image: url(../hud/share_camera-hover.png);
+  background-image: url(../hud/share_camera_off-hover.png);
+}
+:local(.iconButton.share_camera.active) {
+  background-image: url(../hud/share_camera_on.png);
+}
+:local(.iconButton.share_camera.active:hover) {
+  background-image: url(../hud/share_camera_on-hover.png);
 }
 
 :local(.iconButton.share_screen) {
-  background-image: url(../hud/share_screen.png);
+  background-image: url(../hud/share_screen_off.png);
 }
 :local(.iconButton.share_screen:hover) {
-  background-image: url(../hud/share_screen-hover.png);
+  background-image: url(../hud/share_screen_off-hover.png);
+}
+:local(.iconButton.share_screen.active) {
+  background-image: url(../hud/share_screen_on.png);
+}
+:local(.iconButton.share_screen.active:hover) {
+  background-image: url(../hud/share_screen_on-hover.png);
 }
 
 :local(.iconButton.share_window) {
-  background-image: url(../hud/share_window.png);
+  background-image: url(../hud/share_window_off.png);
 }
 :local(.iconButton.share_window:hover) {
-  background-image: url(../hud/share_window-hover.png);
+  background-image: url(../hud/share_window_off-hover.png);
+}
+:local(.iconButton.share_window.active) {
+  background-image: url(../hud/share_window_on.png);
+}
+:local(.iconButton.share_window.active:hover) {
+  background-image: url(../hud/share_window_on-hover.png);
 }