Merge pull request #16709 from Budibase/fix/default-app-icon

Fix default app icon

Author: adrinr

packages/builder/src/components/common/EditableIcon.svelte

@@ -6,13 +6,16 @@
   export let size: "M" | "L" | "XL" = "M"
   export let color: string
   export let disabled: boolean = false
+  export let defaultValue = "squares-four"
 
   let modal: Modal
+
+  $: icon = name || defaultValue
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="editable-icon">
+<div class="editable-icon" class:disabled>
   {#if !disabled}
     <div class="hover" on:click={modal.show}>
       <Icon
@@ -22,10 +25,10 @@
       />
     </div>
     <div class="normal">
-      <Icon name={name || "squares-four"} {size} {color} />
+      <Icon name={icon} {size} {color} />
     </div>
   {:else}
-    <Icon {name} {size} {color} />
+    <Icon name={icon} {size} {color} />
   {/if}
 </div>
 
@@ -52,4 +55,7 @@
   .editable-icon:hover .hover {
     display: block;
   }
+  .disabled {
+    opacity: 0.5;
+  }
 </style>