style(webui): add icons to InspectTypeEditor

webui/src/lib/components/InspectTypeEditor.svelte

@@ -10,6 +10,8 @@
 	import { ATTR_OF } from '@upnd/upend/constants';
 	import { createEventDispatcher } from 'svelte';
 	import LabelBorder from './utils/LabelBorder.svelte';
+	import Icon from '$lib/components/utils/Icon.svelte';
+
 	const dispatch = createEventDispatcher();
 
 	export let entity: Readable<UpObject | undefined>;
@@ -21,6 +23,7 @@
 
 	let types: Array<{ address: string; entry: UpEntry; required: UpEntry | undefined }> = [];
 	$: updateTypes($entity?.attr[`~${ATTR_OF}`] || []);
+
 	async function updateTypes(entries: UpEntry[]) {
 		types = [];
 		const query = await api.query(
@@ -122,7 +125,11 @@
 						class:required={type.required}
 						on:click={() => setRequired(type.entry, !type.required)}
 					>
-						{type.required ? $i18n.t('Required') : $i18n.t('Optional')}
+						{#if type.required}
+							<Icon plain name="lock" /> {$i18n.t('Required')}
+						{:else}
+							<Icon plain name="lock-open" /> {$i18n.t('Optional')}
+						{/if}
 					</button>
 					<div class="controls">
 						<IconButton name="x-circle" on:click={() => remove(type.entry)} />