fix: v-html in icon

docs/modules/ROOT/pages/action_customization/icons.adoc

@@ -39,12 +39,11 @@ And you should get something that looks like this;
 
 image::../action-button-iconify.png[]
 
-== HugeIcons icons (bundled)
+== Default Icon (bundled HugeIcon)
 
-The OliveTin web UI ships with curated https://www.hugeicons.com/[HugeIcons] symbols.
-Set `icon:` to `hugeicons:` followed by the icon export name, for example `hugeicons:NeutralIcon`.
+OliveTin used to use a default emoji smiley face as the default icon for actions, but that was a bit too "emoji" and not everyone liked it. Now, OliveTin uses a simple "command line" icon from the HugeIcons set as the default icon for actions. This is a simple and neutral icon that should work well for most actions.
 
-This is the neutral glyph OliveTin uses when no icon is configured for an action.
+If you need to reset a default icon for some reason, this is how you can do it;
 
 .`config.yaml`
 ----
@@ -54,7 +53,7 @@ actions:
     shell: echo hello
 ----
 
-Known `hugeicons:` names are registered in the web UI (`ActionIconGlyph` Vue component).
+If you want to use other icons from the HugeIcons set, you need to use the Iconify method described above, not with the "hugeicons:" prefix - that only works for the default icon.
 
 == Unicode icons ("emoji")
 
@@ -73,7 +72,7 @@ actions:
     shell: echo "You are awesome"
 ----
 
-=== Unicode alises
+=== Unicode aliases
 
 OliveTin has hard-coded aliases for a few commonly used icons, so you don't have to type out the full unicode codes. A list of those hard coded icons is;
 

docs/modules/ROOT/pages/config.adoc

@@ -18,7 +18,7 @@ actions:
     shell: echo 'Hello World!'
 ----
 
-The configuration does not really get more complicated than that. You can of course add more actions, and customize more, but the syntax otherwise extremely simple.
+The configuration does not really get more complicated than that. You can of course add more actions, and customize more, but the syntax is otherwise extremely simple.
 
 For building up from here, look at the following resources;
 

frontend/resources/vue/components/ActionIconGlyph.vue

@@ -7,7 +7,7 @@
 			height="1em"
 			class="action-icon-glyph-svg"
 		/>
-		<span v-else v-html="decodedHtmlGlyph"></span>
+		<span v-else v-text="decodedTextGlyph"></span>
 	</span>
 </template>
 
@@ -32,25 +32,36 @@ const props = defineProps({
 })
 
 const hugeiconsModel = computed(() => {
+	if (!props.glyph) {
+		return CommandLineIcon
+	}
+
 	if (!props.glyph.startsWith(hugeiconsPrefix)) {
 		return null
 	}
+
 	const name = props.glyph.slice(hugeiconsPrefix.length)
 	const iconModel = hugeiconsRegistry[name]
 
 	return iconModel ?? CommandLineIcon
 })
 
-const decodedHtmlGlyph = computed(() => {
-	if (props.glyph === '') {
-		return '&#x1f4a9;'
-	}
+function decodeHtmlEntities(text) {
+	return text.replace(/&#x([0-9a-fA-F]+);?/g, (_, hex) => {
+		const codePoint = Number.parseInt(hex, 16)
+		return Number.isFinite(codePoint) ? String.fromCodePoint(codePoint) : ''
+	}).replace(/&#(\d+);?/g, (_, decimal) => {
+		const codePoint = Number.parseInt(decimal, 10)
+		return Number.isFinite(codePoint) ? String.fromCodePoint(codePoint) : ''
+	})
+}
 
+const decodedTextGlyph = computed(() => {
 	if (hugeiconsModel.value) {
 		return ''
 	}
 
-	return unescape(props.glyph)
+	return decodeHtmlEntities(props.glyph)
 })
 </script>