style: add text to iconbuttons

webui/src/components/BrowseColumn.svelte

@@ -50,7 +50,9 @@
         name="pencil"
         on:click={() => (editable = !editable)}
         active={editable}
-      />
+      >
+        Edit
+      </IconButton>
       <IconButton
         name={detail ? "zoom-out" : "zoom-in"}
         on:click={() => {
@@ -58,13 +60,19 @@
           detailChanged = true;
         }}
         active={detail}
-      />
-      <IconButton name="link" on:click={() => visit()} disabled={only} />
+      >
+        Detail
+      </IconButton>
+      <IconButton name="link" on:click={() => visit()} disabled={only}>
+        Link
+      </IconButton>
       <IconButton
         name="x-circle"
         on:click={() => dispatch("close")}
         disabled={only}
-      />
+      >
+        Close
+      </IconButton>
     </header>
     <Inspect
       {address}

webui/src/components/utils/IconButton.svelte

@@ -9,10 +9,17 @@
 
 <button on:click class:active {disabled} {title}>
   <Icon {name} />
+  <div class="text">
+    <slot />
+  </div>
 </button>
 
 <style lang="scss">
   button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
     border: 0;
     background: transparent;
     cursor: pointer;
@@ -35,4 +42,10 @@
     color: gray;
     pointer-events: none;
   }
+
+  .text {
+    font-size: 0.66em;
+    text-align: center;
+    margin-top: 0.2em;
+  }
 </style>