Show an icon instead of "eat X" text

gorge.css

@@ -21,6 +21,7 @@ button {
 }
 
 #tasty-micro {
+  border-radius: 25%;
   color: #ddd;
   background-color: #211;
   width: 300px;
@@ -30,12 +31,18 @@ button {
   margin: auto;
   font-size: 60px;
   transition: 0.5s;
+  font-size: 200px;
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 2.275)
 }
 
 #tasty-micro:active {
   transform: scale(0.9, 0.9);
   transition: 0s;
+  font-size: 175px;
+}
+
+#tasty-micro:focus {
+  outline: none;
 }
 
 #top-bar {

gorge.html

@@ -40,7 +40,7 @@
     <div id="resources" class="title">Resources</div>
     <div id="resource-list"></div>
     <div id="productivity"></div>
-    <button id="tasty-micro">Eat Micro</button>
+    <button id="tasty-micro"></button>
     <div id="powerups" class="title">Powerups</div>
     <div id="powerup-list"></div>
     <div id="powerup-tooltip">

gorge.js

@@ -454,12 +454,20 @@ function updateClickPowers() {
 }
 
 function updateClickVictim() {
-  for (let effect of effects["click-victim"]) {
+  const button = document.querySelector("#tasty-micro");
+  button.classList.remove(...button.classList);
+  for (let i=effects["click-victim"].length - 1; i >=0; i--) {
+    const effect = effects["click-victim"][i];
     if (ownedUpgrades[effect.parent]) {
       clickPowers.clickVictim = effect.id;
-      document.querySelector("#tasty-micro").innerText = "Eat " + buildings[effect.id].name;
+      button.classList.add("fas")
+      button.classList.add(buildings[effect.id].icon)
+      return;
     }
   }
+  clickPowers.clickVictim = "micro";
+  button.classList.add("fas")
+  button.classList.add(buildings.micro.icon)
 }
 
 function buyUpgrade(id, e) {