icon cleanup

frontend/src/lib/components/icon.svelte

@@ -1,5 +1,3 @@
-<!-- FIXME: deal with this mess in style property. You can't do all that right in your HTML -->
-
 <script>
     export let image = "";
     export let onclick;
@@ -13,21 +11,23 @@
 
 </script>
 
-<!-- FIXME: You horrible son of a goose-->
 <input class="{externalClasses} {Clickablility} icon" type="button" value="" 
-style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" 
+style="--icon-image: url({image}); --icon-color: {color}; --icon-size: {size};" 
 on:click={onclick ? onclick : null}>
 
 <style>
     :global(.icon) {
-        background-color: var(--color);
+
+        height: var(--icon-size);
+        width: var(--icon-size);
+
+        background-color: var(--icon-color);
+
         object-fit: contain;
-        -webkit-mask-image: var(--image);
+        -webkit-mask-image: var(--icon-image);
-        mask-image: var(--image);
+        mask-image: var(--icon-image);
         mask-repeat: no-repeat;
         mask-size: contain;
-        height: var(--size);
-        width: var(--size);
     }
 
     .clickable {