💄 UI stylings

components/section.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
-    <legend @click.prevent="collapse"><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
+    <legend @click.prevent="collapse"><i class="material-icons icon">{{ icon }}</i><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
     <div class="collapsible" :class="{ hidden: collapsed }">
       <slot />
     </div>
@@ -11,6 +11,9 @@
   fieldset.no-colored-frames legend {
     color: var(--fg-color);
   }
+  .icon {
+    margin-right: 8px;
+  }
 </style>
 
 <script>
@@ -32,6 +35,10 @@ export default {
       type: String,
       default: "Section"
     },
+    icon: {
+      type: String,
+      default: "lens"
+    },
     collapsed: {
       type: Boolean
     }