From 4ce9de5fdaad45a47c453b79580cdf8a5c41139b Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 23 Apr 2025 13:42:48 -0600
Subject: [PATCH 01/11] Adds material icons library and icon component

---
 packages/web-forms/package.json               |  3 +-
 packages/web-forms/src/assets/css/style.scss  |  2 -
 .../web-forms/src/components/widgets/Icon.vue | 82 +++++++++++++++++++
 yarn.lock                                     |  5 ++
 4 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 packages/web-forms/src/components/widgets/Icon.vue

diff --git a/packages/web-forms/package.json b/packages/web-forms/package.json
index c0de590f..3cf8bb45 100644
--- a/packages/web-forms/package.json
+++ b/packages/web-forms/package.json
@@ -78,7 +78,8 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "vue-draggable-plus": "^0.6.0"
+    "vue-draggable-plus": "^0.6.0",
+    "@mdi/js": "^7.4.47"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/web-forms/src/assets/css/style.scss b/packages/web-forms/src/assets/css/style.scss
index 251574c6..896e5cbb 100644
--- a/packages/web-forms/src/assets/css/style.scss
+++ b/packages/web-forms/src/assets/css/style.scss
@@ -38,8 +38,6 @@
 
 	--odk-border-color: var(--p-surface-300);
 
-	--odk-icon-size: 1.5rem;
-
 	--odk-radius: 6px;
 }
 
diff --git a/packages/web-forms/src/components/widgets/Icon.vue b/packages/web-forms/src/components/widgets/Icon.vue
new file mode 100644
index 00000000..5d10150d
--- /dev/null
+++ b/packages/web-forms/src/components/widgets/Icon.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { mdiAccount, mdiAlertRhombus } from '@mdi/js';
+
+const iconMap: Record<string, string> = {
+	mdiAccount,
+	mdiAlertRhombus,
+};
+
+type IconName = keyof typeof iconMap;
+type IconVariant = 'base' | 'primary' | 'inverted' | 'error' | 'muted';
+type IconSize = 'sm' | 'md';
+
+/**
+ * Defines the icon's display and appearance.
+ *
+ * @property {IconName} name - The name of the icon to render.
+ * @property {IconSize} size - The size of the icon applied to the SVG's width and height. Defaults to 'md'.
+ * @property {IconVariant} variant - The style variant of the icon. Defaults to 'base'.
+ */
+interface IconProps {
+	name: IconName;
+	size?: IconSize;
+	variant?: IconVariant;
+}
+
+const props = defineProps<IconProps>();
+const iconData = computed(() => iconMap[props.name]);
+const iconVariant = computed(() => props.variant ?? 'base');
+const iconSize = computed(() => props.size ?? 'md');
+</script>
+
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="odk-icon"
+		:class="[iconVariant, `odk-icon-${iconSize}`]">
+		<path :d="iconData" />
+	</svg>
+</template>
+
+<style scoped lang="scss">
+.odk-icon {
+	display: inline-block;
+	vertical-align: middle;
+	overflow: visible;
+}
+
+.odk-icon.base path {
+	fill: var(--odk-text-color);
+}
+
+.odk-icon.primary path {
+	fill: var(--odk-primary-text-color);
+}
+
+.odk-icon.inverted path {
+	fill: var(--odk-inverted-text-color);
+}
+
+.odk-icon.error path {
+	fill: var(--odk-error-text-color);
+}
+
+.odk-icon.muted path {
+	fill: var(--odk-muted-text-color);
+}
+
+.odk-icon.odk-icon-sm {
+	height: 14px;
+	width: 14px;
+
+	path {
+		transform: scale(0.66) translate(-1px, -1px);
+	}
+}
+
+.odk-icon.odk-icon-md {
+	height: 24px;
+	width: 24px;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 454a3f28..6c6cf1c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -878,6 +878,11 @@
     globby "^11.0.0"
     read-yaml-file "^1.1.0"
 
+"@mdi/js@^7.4.47":
+  version "7.4.47"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-7.4.47.tgz#7d8a4edc9631bffeed80d1ec784f9beae559a76a"
+  integrity sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==
+
 "@microsoft/api-extractor-model@7.30.5":
   version "7.30.5"
   resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.30.5.tgz#09b4412a3344ce8e6b58114bf350d6d0b8c86b63"

From 6769b7281964d7939ef6d4e167352f7f1fe379ce Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 24 Apr 2025 18:57:09 -0600
Subject: [PATCH 02/11] Replace with new icon component

---
 packages/web-forms/src/assets/css/style.scss  |   7 +-
 .../web-forms/src/components/FormHeader.vue   |  44 ++++---
 .../src/components/FormLanguageMenu.vue       |   6 +-
 .../web-forms/src/components/OdkWebForm.vue   |  24 +++-
 .../Geopoint/GeolocationRequestDialog.vue     |  38 +-----
 .../controls/Input/Geopoint/InputGeopoint.vue | 108 ++----------------
 .../web-forms/src/components/widgets/Icon.vue |  45 ++++++--
 packages/web-forms/src/demo/DemoForm.vue      |  15 ++-
 packages/web-forms/src/demo/FormUpload.vue    |  99 ++++++----------
 9 files changed, 152 insertions(+), 234 deletions(-)

diff --git a/packages/web-forms/src/assets/css/style.scss b/packages/web-forms/src/assets/css/style.scss
index b75f76f7..92a71a56 100644
--- a/packages/web-forms/src/assets/css/style.scss
+++ b/packages/web-forms/src/assets/css/style.scss
@@ -25,8 +25,11 @@
 	--odk-primary-lighter-background-color: var(--p-primary-50);
 	--odk-primary-border-color: var(--p-primary-500);
 
-	--odk-error-text-color: var(--p-message-error-color);
-	--odk-error-background-color: var(--p-message-error-background);
+	--odk-error-text-color: var(--p-red-600);
+	--odk-error-background-color: var(--p-red-50);
+
+	--odk-warning-text-color: var(--p-yellow-600);
+	--odk-warning-background-color: var(--p-yellow-50);
 
 	--odk-text-color: var(--p-surface-900);
 	--odk-inverted-text-color: var(--p-surface-0);
diff --git a/packages/web-forms/src/components/FormHeader.vue b/packages/web-forms/src/components/FormHeader.vue
index 70947894..854a2fbc 100644
--- a/packages/web-forms/src/components/FormHeader.vue
+++ b/packages/web-forms/src/components/FormHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Icon from '@/components/widgets/Icon.vue';
 import {
 	type FormLanguage,
 	type RootNode,
@@ -27,7 +28,7 @@ const items = ref([
 	{
 		// TODO: translations
 		label: 'Print',
-		icon: 'icon-local_printshop',
+		icon: 'mdiPrinter',
 		command: print,
 	},
 ]);
@@ -36,7 +37,7 @@ if (languages.length > 0) {
 	items.value.unshift({
 		// TODO: translations
 		label: 'Change language',
-		icon: 'icon-language',
+		icon: 'mdiWeb',
 		command: () => (languageDialogState.value = true),
 	});
 }
@@ -50,7 +51,9 @@ const handleLanguageChange = (event: FormLanguage) => {
 	<!-- for desktop -->
 	<div class="hidden lg:inline larger-screens">
 		<div class="flex justify-content-end flex-wrap gap-3">
-			<Button class="print-button" severity="secondary" rounded icon="icon-local_printshop" @click="print" />
+			<Button class="print-button" severity="secondary" rounded @click="print">
+				<Icon name="mdiPrinter" />
+			</Button>
 			<FormLanguageMenu
 				:active-language="form.currentState.activeLanguage"
 				:languages="languages"
@@ -75,12 +78,23 @@ const handleLanguageChange = (event: FormLanguage) => {
 
 		<div class="form-options">
 			<!-- if Form is not multilingual then we always show print button -->
-			<Button v-if="languages.length === 0" class="print-button" severity="secondary" rounded icon="icon-local_printshop" @click="print" />
+			<Button v-if="languages.length === 0" class="print-button" severity="secondary" rounded @click="print">
+				<Icon name="mdiPrinter" />
+			</Button>
 
 			<!-- show either hamburger or (print button and language changer) based on container size -->
 			<div v-else class="multilingual">
-				<Button icon="icon-menu" class="btn-menu" text rounded aria-label="Menu" @click="menu?.toggle" />
-				<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
+				<Button class="btn-menu" text rounded aria-label="Menu" @click="menu?.toggle">
+					<Icon name="mdiMenu" />
+				</Button>
+				<Menu id="overlay_menu" ref="menu" :model="items" :popup="true">
+					<template #item="{ item }">
+						<a class="p-menu-item-link" @click="item.command">
+							<Icon :name="item.icon" />
+							<span>{{ item.label }}</span>
+						</a>
+					</template>
+				</Menu>
 				<FormLanguageDialog
 					v-model:state="languageDialogState"
 					:active-language="form.currentState.activeLanguage"
@@ -88,7 +102,9 @@ const handleLanguageChange = (event: FormLanguage) => {
 					@update:active-language="handleLanguageChange"
 				/>
 
-				<Button class="print-button" severity="secondary" rounded icon="icon-local_printshop" @click="print" />
+				<Button class="print-button" severity="secondary" rounded @click="print">
+					<Icon name="mdiPrinter" />
+				</Button>
 				<FormLanguageMenu
 					:active-language="form.currentState.activeLanguage"
 					:languages="languages"
@@ -100,16 +116,18 @@ const handleLanguageChange = (event: FormLanguage) => {
 </template>
 
 <style scoped lang="scss">
-.p-button.p-button-icon-only.p-button-rounded {
-	font-size: var(--odk-icon-size);
-
+.p-button.p-button-rounded {
 	&:hover {
 		background: var(--odk-primary-light-background-color);
+		border-color: var(--odk-primary-border-color);
+		outline: none;
 	}
 
 	&:active,
 	&:focus {
 		background: var(--odk-primary-lighter-background-color);
+		border-color: var(--odk-primary-border-color);
+		outline: none;
 	}
 }
 
@@ -190,9 +208,3 @@ const handleLanguageChange = (event: FormLanguage) => {
 	}
 }
 </style>
-
-<style>
-.p-menu .p-menu-item-content .p-menu-item-icon {
-	font-size: var(--odk-icon-size);
-}
-</style>
diff --git a/packages/web-forms/src/components/FormLanguageMenu.vue b/packages/web-forms/src/components/FormLanguageMenu.vue
index 6a374b25..2e5c39dd 100644
--- a/packages/web-forms/src/components/FormLanguageMenu.vue
+++ b/packages/web-forms/src/components/FormLanguageMenu.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Icon from '@/components/widgets/Icon.vue';
 import type { ActiveLanguage, FormLanguage } from '@getodk/xforms-engine';
 import Select from 'primevue/select';
 
@@ -18,7 +19,7 @@ defineEmits(['update:activeLanguage']);
 		@update:model-value="$emit('update:activeLanguage', $event)"
 	>
 		<template #value="slotProps">
-			<span class="icon-language" />
+			<Icon name="mdiWeb" />
 			<span>
 				{{ slotProps.value.language }}
 			</span>
@@ -51,9 +52,8 @@ defineEmits(['update:activeLanguage']);
 		}
 	}
 
-	.icon-language {
+	.odk-icon {
 		margin-right: 10px;
-		font-size: var(--odk-icon-size);
 	}
 }
 </style>
diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index 6c5b6b06..d07009e1 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Icon from '@/components/widgets/Icon.vue';
 import type { FormStateSuccessResult } from '@/lib/init/FormState.ts';
 import { initializeFormState } from '@/lib/init/initializeFormState.ts';
 import type { EditInstanceOptions } from '@/lib/init/loadFormState';
@@ -221,8 +222,9 @@ watchEffect(() => {
 		<div class="form-wrapper">
 			<div v-if="showValidationError" class="error-banner-placeholder"></div>
 			<!-- Closable error message to clear the view and avoid overlap with other elements -->
-			<Message v-if="showValidationError" severity="error" icon="icon-error_outline" class="form-error-message" :closable="true" @close="floatingErrorActive = false">
-				{{ validationErrorMessage }}
+			<Message v-if="showValidationError" severity="error" class="form-error-message" :closable="true" @close="floatingErrorActive = false">
+				<Icon name="mdiAlertCircleOutline" variant="error" />
+				<span>{{ validationErrorMessage }}</span>
 			</Message>
 
 			<FormHeader :form="state.root" />
@@ -315,15 +317,25 @@ watchEffect(() => {
 			}
 
 			:deep(.p-message-text) {
+				display: flex;
+				align-items: center;
 				font-weight: 400;
-				flex-grow: 1;
+			}
+
+			.odk-icon {
+				margin-right: 10px;
 			}
 		}
 	}
 
-	.print-button.p-button {
-		height: 2rem;
-		width: 2rem;
+	:deep(.print-button.p-button) {
+		display: flex;
+		height: var(--p-button-icon-only-width);
+		width: var(--p-button-icon-only-width);
+		padding-inline-start: 0;
+		padding-inline-end: 0;
+		gap: 0;
+		border-radius: 50%;
 	}
 
 	.footer {
diff --git a/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue b/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
index b2332b71..bf77965d 100644
--- a/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
+++ b/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Icon from '@/components/widgets/Icon.vue';
 import { computed, onBeforeUnmount, ref, watchEffect } from 'vue';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
@@ -127,18 +128,7 @@ onBeforeUnmount(cleanup);
 					<strong>Finding your location</strong>
 				</div>
 				<button class="close-icon" @click="cancel()">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="14"
-						height="14"
-						viewBox="0 0 14 14"
-						fill="none"
-					>
-						<path
-							d="M8.23648 6.99995L13.3931 1.84328C13.4791 1.76318 13.5481 1.66658 13.5959 1.55925C13.6437 1.45191 13.6694 1.33605 13.6715 1.21856C13.6736 1.10107 13.652 0.984374 13.608 0.875421C13.564 0.766468 13.4984 0.667495 13.4154 0.584407C13.3323 0.501318 13.2333 0.435816 13.1243 0.391808C13.0154 0.347801 12.8987 0.326188 12.7812 0.328261C12.6637 0.330334 12.5479 0.35605 12.4405 0.403874C12.3332 0.451698 12.2366 0.52065 12.1565 0.606618L6.99982 5.76328L1.84315 0.606618C1.67728 0.452058 1.45789 0.367914 1.23121 0.371914C1.00452 0.375913 0.788239 0.467744 0.627924 0.628059C0.467609 0.788375 0.375778 1.00466 0.371778 1.23134C0.367778 1.45803 0.451922 1.67741 0.606482 1.84328L5.76315 6.99995L0.606482 12.1566C0.442624 12.3207 0.350586 12.5431 0.350586 12.775C0.350586 13.0068 0.442624 13.2292 0.606482 13.3933C0.770545 13.5571 0.99294 13.6492 1.22482 13.6492C1.45669 13.6492 1.67909 13.5571 1.84315 13.3933L6.99982 8.23662L12.1565 13.3933C12.3205 13.5571 12.5429 13.6492 12.7748 13.6492C13.0067 13.6492 13.2291 13.5571 13.3931 13.3933C13.557 13.2292 13.649 13.0068 13.649 12.775C13.649 12.5431 13.557 12.3207 13.3931 12.1566L8.23648 6.99995Z"
-							fill="#212121"
-						/>
-					</svg>
+					<Icon name="mdiClose" />
 				</button>
 			</div>
 		</template>
@@ -146,21 +136,8 @@ onBeforeUnmount(cleanup);
 		<template #default>
 			<div class="geo-dialog-body">
 				<div v-if="accuracy.value != null" class="geopoint-icons">
-					<i v-if="accuracy.quality === GeopointAccuracy.POOR" class="icon-warning" />
-					<svg
-						v-else
-						class="icon-good-location"
-						xmlns="http://www.w3.org/2000/svg"
-						width="22"
-						height="17"
-						viewBox="0 0 22 17"
-						fill="none"
-					>
-						<path
-							d="M7.49994 12.8668L2.63494 8.00177L0.978271 9.64677L7.49994 16.1684L21.4999 2.16844L19.8549 0.523438L7.49994 12.8668Z"
-							fill="#3B82F6"
-						/>
-					</svg>
+					<Icon v-if="accuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
+					<Icon v-else name="mdiCheck" variant="primary" />
 				</div>
 
 				<div class="geopoint-information">
@@ -232,13 +209,9 @@ onBeforeUnmount(cleanup);
 	border-radius: var(--odk-radius);
 
 	.geopoint-icons {
+		margin-top: -4px;
 		margin-right: var(--geo-spacing-l);
 	}
-
-	.icon-warning {
-		font-size: var(--odk-icon-size);
-		color: var(--odk-error-text-color);
-	}
 }
 
 .geo-dialog-body {
@@ -253,6 +226,7 @@ onBeforeUnmount(cleanup);
 		font-size: var(--odk-base-font-size);
 		margin: var(--geo-spacing-s) 0;
 	}
+
 	strong {
 		font-size: var(--odk-base-font-size);
 		display: block;
diff --git a/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue b/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
index 2e9c5c4c..8a4e0f4b 100644
--- a/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
+++ b/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Icon from '@/components/widgets/Icon.vue';
 import { computed, inject, ref } from 'vue';
 import Button from 'primevue/button';
 import type { GeopointInputNode } from '@getodk/xforms-engine';
@@ -122,40 +123,15 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 			:disabled="isDisabled"
 			@click="initiateRequest()"
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				height="24px"
-				viewBox="0 0 24 24"
-				width="24px"
-				fill="#5f6368"
-			>
-				<path d="M0 0h24v24H0V0z" fill="none" />
-				<path
-					d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z"
-				/>
-				<circle cx="12" cy="9" r="2.5" />
-			</svg>
+			<Icon name="mdiMapMarkerOutline" variant="inverted" />
 			<!-- TODO: translations -->
 			<span>Get location</span>
 		</Button>
 
 		<div v-if="committedValue != null" class="geopoint-value-container">
 			<div class="geopoint-icons">
-				<i v-if="committedValueAccuracy.quality === GeopointAccuracy.POOR" class="icon-warning" />
-				<svg
-					v-else
-					class="icon-good-location"
-					xmlns="http://www.w3.org/2000/svg"
-					width="22"
-					height="17"
-					viewBox="0 0 22 17"
-					fill="none"
-				>
-					<path
-						d="M7.49994 12.8668L2.63494 8.00177L0.978271 9.64677L7.49994 16.1684L21.4999 2.16844L19.8549 0.523438L7.49994 12.8668Z"
-						fill="#3B82F6"
-					/>
-				</svg>
+				<Icon v-if="committedValueAccuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
+				<Icon v-else name="mdiCheck" variant="primary" />
 			</div>
 			<div class="geopoint-value">
 				<strong class="geo-quality">{{ committedValueAccuracy.label }}</strong>
@@ -167,27 +143,7 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 					class="retry-button"
 					@click="initiateRequest()"
 				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="15"
-						height="14"
-						viewBox="0 0 15 14"
-						fill="none"
-					>
-						<g clip-path="url(#clip0_1092_687)">
-							<path
-								fill-rule="evenodd"
-								clip-rule="evenodd"
-								d="M7.27039 5.96336C7.34312 5.99355 7.42115 6.00891 7.4999 6.00854C7.57865 6.00891 7.65668 5.99355 7.72941 5.96336C7.80214 5.93317 7.86811 5.88876 7.92345 5.83273L10.3209 3.43529C10.4331 3.32291 10.4962 3.17058 10.4962 3.01175C10.4962 2.85292 10.4331 2.70058 10.3209 2.5882L7.92345 0.190763C7.86858 0.131876 7.80241 0.0846451 7.72889 0.0518865C7.65536 0.019128 7.576 0.00151319 7.49552 9.32772e-05C7.41505 -0.00132663 7.33511 0.0134773 7.26048 0.0436218C7.18585 0.0737664 7.11805 0.118634 7.06114 0.175548C7.00422 0.232462 6.95936 0.300257 6.92921 0.374888C6.89907 0.449519 6.88426 0.529456 6.88568 0.609933C6.8871 0.690409 6.90472 0.769775 6.93748 0.843296C6.97023 0.916817 7.01747 0.982986 7.07635 1.03786L8.45091 2.41241H7.49986C5.96325 2.41241 4.48957 3.02283 3.40302 4.10938C2.31647 5.19593 1.70605 6.66961 1.70605 8.20622C1.70605 9.74283 2.31647 11.2165 3.40302 12.3031C4.48957 13.3896 5.96325 14 7.49986 14C9.03582 13.9979 10.5083 13.3868 11.5944 12.3007C12.6805 11.2146 13.2916 9.74218 13.2937 8.20622C13.2937 8.04726 13.2305 7.89481 13.1181 7.78241C13.0057 7.67001 12.8533 7.60686 12.6943 7.60686C12.5353 7.60686 12.3829 7.67001 12.2705 7.78241C12.1581 7.89481 12.0949 8.04726 12.0949 8.20622C12.0949 9.11504 11.8255 10.0035 11.3205 10.7591C10.8156 11.5148 10.098 12.1037 9.25832 12.4515C8.41868 12.7993 7.49476 12.8903 6.6034 12.713C5.71204 12.5357 4.89328 12.0981 4.25064 11.4554C3.60801 10.8128 3.17037 9.99404 2.99307 9.10268C2.81576 8.21132 2.90676 7.2874 3.25455 6.44776C3.60234 5.60811 4.19131 4.89046 4.94697 4.38554C5.70263 3.88063 6.59104 3.61113 7.49986 3.61113H8.45086L7.07635 4.98564C6.96411 5.09802 6.90107 5.25035 6.90107 5.40918C6.90107 5.56801 6.96411 5.72035 7.07635 5.83273C7.13169 5.88876 7.19766 5.93317 7.27039 5.96336Z"
-								fill="#64748B"
-							/>
-						</g>
-						<defs>
-							<clipPath id="clip0_1092_687">
-								<rect width="14" height="14" fill="white" transform="translate(0.5)" />
-							</clipPath>
-						</defs>
-					</svg>
+					<Icon name="mdiRefresh" />
 					<!-- TODO: translations -->
 					<span>Try again</span>
 				</Button>
@@ -226,41 +182,6 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 	--geo-spacing-xxl: 30px;
 }
 
-.get-location-button,
-.retry-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0px;
-	font-size: var(--odk-base-font-size);
-
-	svg {
-		margin-right: var(--geo-spacing-s);
-	}
-}
-
-.get-location-button {
-	svg {
-		fill: var(--odk-inverted-text-color);
-	}
-
-	&:disabled svg {
-		fill: var(--odk-muted-text-color);
-	}
-}
-
-.retry-button {
-	margin-left: 0;
-
-	svg {
-		height: 24px;
-	}
-
-	svg path {
-		fill: var(--odk-text-color);
-	}
-}
-
 .geopoint-value-container {
 	display: inline-flex;
 	background: var(--odk-muted-background-color);
@@ -269,18 +190,13 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 	font-size: var(--odk-answer-font-size);
 	padding: var(--geo-spacing-xl);
 
-	.geo-quality,
-	.geopoint-icons {
+	.geo-quality {
 		margin-right: var(--geo-spacing-l);
 	}
 
-	.geopoint-icons svg {
-		width: 20px;
-	}
-
-	.icon-warning {
-		font-size: var(--odk-icon-size);
-		color: var(--odk-error-text-color);
+	.geopoint-icons {
+		margin-top: -4px;
+		margin-right: var(--geo-spacing-l);
 	}
 
 	.geopoint-value {
@@ -301,12 +217,6 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 	margin-top: var(--geo-spacing-l);
 	padding: var(--geo-spacing-xl);
 
-	.icon-warning {
-		font-size: var(--odk-icon-size);
-		margin-right: var(--geo-spacing-s);
-		vertical-align: text-bottom;
-	}
-
 	&.stack-errors {
 		padding: 0;
 	}
diff --git a/packages/web-forms/src/components/widgets/Icon.vue b/packages/web-forms/src/components/widgets/Icon.vue
index 5d10150d..618a2355 100644
--- a/packages/web-forms/src/components/widgets/Icon.vue
+++ b/packages/web-forms/src/components/widgets/Icon.vue
@@ -1,14 +1,40 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { mdiAccount, mdiAlertRhombus } from '@mdi/js';
+import {
+	mdiAlert,
+	mdiAlertCircleOutline,
+	mdiCheck,
+	mdiClose,
+	mdiDownload,
+	mdiEye,
+	mdiFileDocumentOutline,
+	mdiMapMarkerOutline,
+	mdiMenu,
+	mdiPrinter,
+	mdiRefresh,
+	mdiUpload,
+	mdiWeb,
+} from '@mdi/js';
 
+// Find icons here: https://pictogrammers.com/library/mdi/
 const iconMap: Record<string, string> = {
-	mdiAccount,
-	mdiAlertRhombus,
+	mdiAlert,
+	mdiAlertCircleOutline,
+	mdiCheck,
+	mdiClose,
+	mdiDownload,
+	mdiEye,
+	mdiFileDocumentOutline,
+	mdiMapMarkerOutline,
+	mdiMenu,
+	mdiPrinter,
+	mdiRefresh,
+	mdiUpload,
+	mdiWeb,
 };
 
 type IconName = keyof typeof iconMap;
-type IconVariant = 'base' | 'primary' | 'inverted' | 'error' | 'muted';
+type IconVariant = 'base' | 'primary' | 'inverted' | 'muted' | 'error' | 'warning';
 type IconSize = 'sm' | 'md';
 
 /**
@@ -34,7 +60,8 @@ const iconSize = computed(() => props.size ?? 'md');
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		class="odk-icon"
-		:class="[iconVariant, `odk-icon-${iconSize}`]">
+		:class="[iconVariant, `odk-icon-${iconSize}`]"
+	>
 		<path :d="iconData" />
 	</svg>
 </template>
@@ -58,12 +85,16 @@ const iconSize = computed(() => props.size ?? 'md');
 	fill: var(--odk-inverted-text-color);
 }
 
+.odk-icon.muted path {
+	fill: var(--odk-muted-text-color);
+}
+
 .odk-icon.error path {
 	fill: var(--odk-error-text-color);
 }
 
-.odk-icon.muted path {
-	fill: var(--odk-muted-text-color);
+.odk-icon.warning path {
+	fill: var(--odk-warning-text-color);
 }
 
 .odk-icon.odk-icon-sm {
diff --git a/packages/web-forms/src/demo/DemoForm.vue b/packages/web-forms/src/demo/DemoForm.vue
index 9b55f683..521ed0f1 100644
--- a/packages/web-forms/src/demo/DemoForm.vue
+++ b/packages/web-forms/src/demo/DemoForm.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Icon from '@/components/widgets/Icon.vue';
 import { xformFixturesByIdentifier } from '@getodk/common/fixtures/xforms';
 import { xlsFormUrlMap } from '@getodk/common/fixtures/xlsforms';
 import Button from 'primevue/button';
@@ -45,10 +46,16 @@ const formXls = computed(() => {
 			</p>
 			<div class="actions">
 				<RouterLink :to="`/form?url=${formXml}`" target="_blank" class="form-preview-link">
-					<Button class="preview-button" label="View Form" icon="icon-remove_red_eye" />
+					<Button class="preview-button">
+						<Icon name="mdiEye" variant="inverted" />
+						<span>View Form</span>
+					</Button>
 				</RouterLink>
 				<a :href="formXls">
-					<Button class="download-button" label="Download" severity="contrast" variant="outlined" icon="icon-file_download" />
+					<Button class="download-button" severity="contrast" variant="outlined">
+						<Icon name="mdiDownload" />
+						<span>Download</span>
+					</Button>
 				</a>
 			</div>
 		</div>
@@ -95,9 +102,5 @@ const formXls = computed(() => {
 		flex-direction: row;
 		gap: 1rem;
 	}
-
-	:deep(.p-button) .p-button-icon {
-		font-size: var(--odk-icon-size);
-	}
 }
 </style>
diff --git a/packages/web-forms/src/demo/FormUpload.vue b/packages/web-forms/src/demo/FormUpload.vue
index 7de124e2..d6256a66 100644
--- a/packages/web-forms/src/demo/FormUpload.vue
+++ b/packages/web-forms/src/demo/FormUpload.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import Icon from '@/components/widgets/Icon.vue';
 import Button from 'primevue/button';
 import ProgressSpinner from 'primevue/progressspinner';
 import { RouterLink } from 'vue-router';
 
-import IconField from 'primevue/iconfield';
 import InputText from 'primevue/inputtext';
 import Message from 'primevue/message';
 
@@ -149,11 +149,7 @@ document.addEventListener(
 				<template	v-if="!formUploading">
 					<input ref="fileInput" type="file" hidden accept=".xls, .xlsx, .xml" @change="fileChangeHandler">
 					<span>
-						<span class="icon-doc-file">
-							<svg xmlns="http://www.w3.org/2000/svg" width="19" height="25" viewBox="0 0 19 25" fill="none">
-								<path d="M18.4557 8.38571L10.8717 0.801714C10.679 0.608765 10.4176 0.50024 10.1449 0.5H4.01459C3.01435 0.5 2.05507 0.897346 1.34779 1.60463C0.64051 2.31191 0.243164 3.27118 0.243164 4.27143V20.7286C0.243164 21.7288 0.64051 22.6881 1.34779 23.3954C2.05507 24.1027 3.01435 24.5 4.01459 24.5H14.986C15.9863 24.5 16.9455 24.1027 17.6528 23.3954C18.3601 22.6881 18.7575 21.7288 18.7575 20.7286V9.07143C18.7467 8.81306 18.6389 8.56823 18.4557 8.38571ZM11.2146 4.01086L15.2466 8.04286H11.2146V4.01086ZM14.986 22.4429H4.01459C3.55994 22.4429 3.1239 22.2622 2.80241 21.9408C2.48092 21.6193 2.30031 21.1832 2.30031 20.7286V4.27143C2.30031 3.81677 2.48092 3.38074 2.80241 3.05925C3.1239 2.73775 3.55994 2.55714 4.01459 2.55714H9.15745V9.07143C9.161 9.34312 9.27051 9.60268 9.46264 9.79481C9.65477 9.98694 9.91433 10.0964 10.186 10.1H16.7003V20.7286C16.7003 21.1832 16.5197 21.6193 16.1982 21.9408C15.8767 22.2622 15.4407 22.4429 14.986 22.4429Z" fill="#4B5563" />
-							</svg>
-						</span>
+						<Icon name="mdiFileDocumentOutline" variant="muted" />
 						Drag and drop XLSForm or <a href="javascript:;" class="upload-file-link" @click="fileInput.click()">upload form</a>
 					</span>
 					<template v-if="inDevMode">
@@ -165,36 +161,37 @@ document.addEventListener(
 				</template>
 				<template v-else>
 					<ProgressSpinner class="spinner" />
-					<span>
-						Uploading form
-					</span>
+					<span>Uploading form</span>
 				</template>
 			</div>
 		</template>
 
 		<div v-else class="preview-wrapper">
-			<IconField icon-position="left" class="textbox-with-icon">
-				<span class="icon-doc-file">
-					<svg xmlns="http://www.w3.org/2000/svg" width="19" height="25" viewBox="0 0 19 25" fill="none">
-						<path d="M18.4557 8.38571L10.8717 0.801714C10.679 0.608765 10.4176 0.50024 10.1449 0.5H4.01459C3.01435 0.5 2.05507 0.897346 1.34779 1.60463C0.64051 2.31191 0.243164 3.27118 0.243164 4.27143V20.7286C0.243164 21.7288 0.64051 22.6881 1.34779 23.3954C2.05507 24.1027 3.01435 24.5 4.01459 24.5H14.986C15.9863 24.5 16.9455 24.1027 17.6528 23.3954C18.3601 22.6881 18.7575 21.7288 18.7575 20.7286V9.07143C18.7467 8.81306 18.6389 8.56823 18.4557 8.38571ZM11.2146 4.01086L15.2466 8.04286H11.2146V4.01086ZM14.986 22.4429H4.01459C3.55994 22.4429 3.1239 22.2622 2.80241 21.9408C2.48092 21.6193 2.30031 21.1832 2.30031 20.7286V4.27143C2.30031 3.81677 2.48092 3.38074 2.80241 3.05925C3.1239 2.73775 3.55994 2.55714 4.01459 2.55714H9.15745V9.07143C9.161 9.34312 9.27051 9.60268 9.46264 9.79481C9.65477 9.98694 9.91433 10.0964 10.186 10.1H16.7003V20.7286C16.7003 21.1832 16.5197 21.6193 16.1982 21.9408C15.8767 22.2622 15.4407 22.4429 14.986 22.4429Z" fill="#4B5563" />
-					</svg>
-				</span>
+			<div class="textbox-with-icon">
+				<Icon name="mdiFileDocumentOutline" class="doc-input-icon" variant="muted" />
 				<InputText :value="uploadedFilename" class="uploaded-file-textbox" />
-				<Button class="clear-button" icon="icon-clear" text rounded aria-label="Cancel" @click="reset()" />
-			</IconField>
+				<Icon name="mdiClose" class="reset-action" aria-label="Cancel" @click="reset()" />
+			</div>
 
 			<div class="action-buttons">
-				<Button label="Upload new Form" icon="icon-file_upload" class="upload-new-button" severity="contrast" variant="outlined" @click="reset" />
+				<Button class="upload-new-button" severity="contrast" variant="outlined" @click="reset">
+					<Icon name="mdiUpload" />
+					<span>Upload new Form</span>
+				</Button>
 				<RouterLink :to="`/form?url=${xformUrl}`" target="_blank" class="preview-link">
-					<Button label="Preview Form" icon="icon-remove_red_eye" class="preview-link-button" />
+					<Button class="preview-link-button">
+						<Icon name="mdiEye" variant="inverted" />
+						<span>Preview Form</span>
+					</Button>
 				</RouterLink>
 			</div>
 		</div>
 
-		<Message v-if="error" severity="error" icon="icon-error" @close="reset()">
+		<Message v-if="error" severity="error" @close="reset()">
 			{{ error }}
 		</Message>
-		<Message v-if="warnings?.length > 0" severity="warn" icon="icon-warning">
+		<Message v-if="warnings?.length > 0" severity="warn">
+			<Icon name="mdiAlert" variant="warning" />
 			<span>There are following possible problems in the uploaded Form:</span>
 			<ul>
 				<li v-for="warning in warnings" :key="warning">
@@ -229,6 +226,10 @@ document.addEventListener(
 		padding: 2rem;
 		font-size: var(--odk-question-font-size);
 		font-weight: 300;
+
+		.odk-icon {
+			vertical-align: bottom;
+		}
 	}
 
 	.dropbox.highlighted {
@@ -249,31 +250,24 @@ document.addEventListener(
 
 		.textbox-with-icon {
 			width: 100%;
+			position: relative;
 
 			.uploaded-file-textbox {
 				width: 100%;
-				padding-right: 3rem;
-				padding-top: 11px;
-				padding-bottom: 11px;
+				padding: 11px 38px 11px 38px;
 			}
 
-			.p-inputicon {
-				color: var(--odk-muted-text-color);
-				top: 40%;
+			.odk-icon.doc-input-icon {
+				position: absolute;
+				top: 9px;
+				left: 8px;
 			}
 
-			.clear-button {
+			.odk-icon.reset-action {
 				position: absolute;
-				margin-top: 3px;
-				right: 1rem;
-				color: var(--odk-text-color);
-
-				&:hover,
-				&:active {
-					color: var(--odk-text-color);
-					background: unset;
-					outline: unset;
-				}
+				top: 11px;
+				right: 7px;
+				cursor: pointer;
 			}
 		}
 
@@ -297,10 +291,6 @@ document.addEventListener(
 			padding-left: 1rem;
 		}
 
-		.p-message-icon {
-			line-height: 2.5rem;
-		}
-
 		.p-message-text {
 			min-height: 2.5rem;
 			display: flex;
@@ -309,31 +299,14 @@ document.addEventListener(
 		}
 	}
 
-	:deep(.p-button) {
-		.p-button-icon {
-			flex-grow: 1;
-			text-align: right;
-			font-size: var(--odk-icon-size);
-		}
+	:deep(.p-message .p-message-content .odk-icon) {
+			margin-right: 10px;
+	}
 
+	:deep(.p-button) {
 		.p-button-label {
 			text-align: left;
 		}
 	}
-
-	.dropbox .icon-doc-file {
-		vertical-align: bottom;
-		margin-right: 5px;
-	}
-
-	.textbox-with-icon .icon-doc-file {
-		position: absolute;
-		top: 10px;
-		left: 13px;
-
-		svg {
-			width: 14px;
-		}
-	}
 }
 </style>

From 668538cec45d17531912ea082d31c891546ab595 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 24 Apr 2025 19:50:09 -0600
Subject: [PATCH 03/11] Replace with new icon component image upload and rank

---
 .../src/components/controls/RankControl.vue   | 25 ++--------
 .../controls/Upload/UploadImageControl.vue    | 48 +++----------------
 .../controls/Upload/UploadImagePreview.vue    | 14 +-----
 .../web-forms/src/components/widgets/Icon.vue | 14 +++++-
 4 files changed, 26 insertions(+), 75 deletions(-)

diff --git a/packages/web-forms/src/components/controls/RankControl.vue b/packages/web-forms/src/components/controls/RankControl.vue
index 3887a631..a29148ea 100644
--- a/packages/web-forms/src/components/controls/RankControl.vue
+++ b/packages/web-forms/src/components/controls/RankControl.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ControlText from '@/components/ControlText.vue';
+import Icon from '@/components/widgets/Icon.vue';
 import ValidationMessage from '@/components/ValidationMessage.vue';
 import type { TimerID } from '@getodk/common/types/timers.ts';
 import type { RankNode } from '@getodk/xforms-engine';
@@ -110,9 +111,7 @@ const swapItems = (index: number, newPosition: number) => {
 	<div class="rank-control-container">
 		<div v-if="!touched" class="rank-overlay">
 			<button :disabled="disabled" @click="selectDefaultOrder">
-				<svg xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15" fill="none">
-					<path d="M3.91263 2.57495L5.96263 4.52245C6.28763 4.8312 6.81263 4.8312 7.13763 4.52245C7.46263 4.2137 7.46263 3.71495 7.13763 3.4062L4.49596 0.888697C4.17096 0.579948 3.64596 0.579948 3.32096 0.888697L0.679297 3.4062C0.354297 3.71495 0.354297 4.2137 0.679297 4.52245C1.0043 4.8312 1.5293 4.8312 1.8543 4.52245L3.91263 2.57495ZM3.91263 12.3441L1.86263 10.3966C1.53763 10.0879 1.01263 10.0879 0.68763 10.3966C0.36263 10.7054 0.36263 11.2041 0.68763 11.5129L3.3293 14.0304C3.6543 14.3391 4.1793 14.3391 4.5043 14.0304L7.14596 11.5208C7.47096 11.212 7.47096 10.7133 7.14596 10.4045C6.82096 10.0958 6.29596 10.0958 5.97096 10.4045L3.91263 12.3441Z" fill="#323232" />
-				</svg>
+				<Icon name="mdiUnfoldMoreHorizontal" size="sm" :variant="disabled ? 'muted' : null" />
 				<!-- TODO: translations -->
 				<span>Rank items</span>
 			</button>
@@ -139,9 +138,7 @@ const swapItems = (index: number, newPosition: number) => {
 				@keydown.down.prevent="moveDown(index)"
 			>
 				<div class="rank-label">
-					<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 768 768">
-						<path d="M480 511.5q25.5 0 45 19.5t19.5 45-19.5 45-45 19.5-45-19.5-19.5-45 19.5-45 45-19.5zM480 319.5q25.5 0 45 19.5t19.5 45-19.5 45-45 19.5-45-19.5-19.5-45 19.5-45 45-19.5zM480 256.5q-25.5 0-45-19.5t-19.5-45 19.5-45 45-19.5 45 19.5 19.5 45-19.5 45-45 19.5zM288 127.5q25.5 0 45 19.5t19.5 45-19.5 45-45 19.5-45-19.5-19.5-45 19.5-45 45-19.5zM288 319.5q25.5 0 45 19.5t19.5 45-19.5 45-45 19.5-45-19.5-19.5-45 19.5-45 45-19.5zM352.5 576q0 25.5-19.5 45t-45 19.5-45-19.5-19.5-45 19.5-45 45-19.5 45 19.5 19.5 45z" />
-					</svg>
+					<Icon name="mdiDragVertical" />
 					<span>{{ props.question.getValueLabel(value)?.asString }}</span>
 				</div>
 
@@ -152,9 +149,7 @@ const swapItems = (index: number, newPosition: number) => {
 						@click="moveUp(index)"
 						@mousedown="setHighlight(index)"
 					>
-						<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 768 768">
-							<path d="M384 256.5l192 192-45 45-147-147-147 147-45-45z" />
-						</svg>
+						<Icon name="mdiChevronUp" size="sm" :variant="disabled || index === 0 ? 'muted' : null" />
 					</button>
 
 					<button
@@ -163,9 +158,7 @@ const swapItems = (index: number, newPosition: number) => {
 						@click="moveDown(index)"
 						@mousedown="setHighlight(index)"
 					>
-						<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 768 768">
-							<path d="M531 274.5l45 45-192 192-192-192 45-45 147 147z" />
-						</svg>
+						<Icon name="mdiChevronDown" size="sm" :variant="disabled || index === values.length - 1 ? 'muted' : null" />
 					</button>
 				</div>
 			</div>
@@ -224,10 +217,6 @@ const swapItems = (index: number, newPosition: number) => {
 		align-items: center;
 		gap: var(--rankSpacing);
 	}
-
-	.rank-label svg {
-		flex-shrink: 0;
-	}
 }
 
 .moving,
@@ -255,10 +244,6 @@ const swapItems = (index: number, newPosition: number) => {
 		background: var(--odk-inactive-background-color);
 		color: var(--odk-muted-text-color);
 		border: none;
-
-		svg path {
-			fill: var(--odk-muted-text-color);
-		}
 	}
 }
 
diff --git a/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue b/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue
index f4eda007..30aa23ec 100644
--- a/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue
+++ b/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ControlText from '@/components/ControlText.vue';
 import ValidationMessage from '@/components/ValidationMessage.vue';
+import Icon from '@/components/widgets/Icon.vue';
 import type { UploadNode } from '@getodk/xforms-engine';
 import Button from 'primevue/button';
 import type { HTMLInputElementEvent, Ref } from 'vue';
@@ -75,18 +76,7 @@ watchEffect(() => {
 				:disabled="isDisabled"
 				@click="triggerInputField(takePictureInput)"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="12"
-					height="11"
-					viewBox="0 0 12 11"
-					fill="none"
-				>
-					<path
-						d="M8.94478 1.33333L7.87728 0.166664H4.37728L3.30978 1.33333H0.293945V10.6667H11.9606V1.33333H8.94478ZM6.12728 8.91666C4.51728 8.91666 3.21061 7.61 3.21061 6C3.21061 4.39 4.51728 3.08333 6.12728 3.08333C7.73728 3.08333 9.04395 4.39 9.04395 6C9.04395 7.61 7.73728 8.91666 6.12728 8.91666Z"
-						fill="white"
-					/>
-				</svg>
+				<Icon name="mdiCamera" variant="inverted" />
 				<!-- TODO: translations -->
 				<span>Take picture</span>
 			</Button>
@@ -106,19 +96,7 @@ watchEffect(() => {
 			:disabled="isDisabled"
 			@click="triggerInputField(selectImageInput)"
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="11"
-				height="12"
-				viewBox="0 0 11 12"
-				fill="none"
-			>
-				<path
-					d="M10.6355 11.25V0.75H0.135498V11.25H10.6355ZM3.34383 6.875L4.80216 8.63083L6.84383 6L9.46883 9.5H1.30216L3.34383 6.875Z"
-					fill="white"
-				/>
-			</svg>
-
+			<Icon name="mdiImage" variant="inverted" />
 			<!-- TODO: Good candidate for <slot> in a general component -->
 			<!-- TODO: translations -->
 			<span>Choose image</span>
@@ -146,22 +124,8 @@ watchEffect(() => {
 </template>
 
 <style scoped lang="scss">
-.capture-buttons button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 145px;
-	gap: 0px;
-
-	&:not(:last-child) {
-		margin-right: 20px;
-		margin-bottom: 10px;
-	}
-
-	svg {
-		margin-right: 5px;
-		width: 16px;
-		height: 24px;
-	}
+.capture-buttons button:not(:last-child) {
+	margin-right: 20px;
+	margin-bottom: 10px;
 }
 </style>
diff --git a/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue b/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue
index 30d62048..0d6fa3ed 100644
--- a/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue
+++ b/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Icon from '@/components/widgets/Icon.vue';
 import type { ObjectURL } from '@getodk/common/lib/web-compat/url.ts';
 import { createObjectURL, revokeObjectURL } from '@getodk/common/lib/web-compat/url.ts';
 import type { UploadNode } from '@getodk/xforms-engine';
@@ -76,18 +77,7 @@ watchEffect(() => {
 <template>
 	<div v-if="imageURL" class="preview-captured-image" :class="{ 'small-image': isSmallImage }">
 		<Button v-if="!isDisabled" severity="secondary" outlined class="clear-button" @click="emit('clear')">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="12"
-				height="12"
-				viewBox="0 0 12 12"
-				fill="none"
-			>
-				<path
-					d="M7.01186 6.00931L11.27 1.75114C11.341 1.68499 11.398 1.60522 11.4375 1.51659C11.4769 1.42796 11.4982 1.33228 11.4999 1.23527C11.5016 1.13825 11.4838 1.04188 11.4474 0.951916C11.4111 0.861947 11.357 0.780219 11.2884 0.711608C11.2198 0.642997 11.138 0.588908 11.0481 0.552568C10.9581 0.516228 10.8617 0.498381 10.7647 0.500093C10.6677 0.501805 10.572 0.52304 10.4834 0.562531C10.3948 0.602022 10.315 0.65896 10.2488 0.729949L5.99067 4.98812L1.7325 0.729949C1.59553 0.602319 1.41437 0.532837 1.22718 0.536139C1.03999 0.539442 0.861396 0.615272 0.729015 0.747654C0.596633 0.880036 0.520802 1.05863 0.5175 1.24582C0.514197 1.43301 0.58368 1.61417 0.711309 1.75114L4.96948 6.00931L0.711309 10.2675C0.576001 10.403 0.5 10.5866 0.5 10.7781C0.5 10.9696 0.576001 11.1532 0.711309 11.2887C0.846786 11.424 1.03043 11.5 1.2219 11.5C1.41338 11.5 1.59702 11.424 1.7325 11.2887L5.99067 7.0305L10.2488 11.2887C10.3843 11.424 10.568 11.5 10.7594 11.5C10.9509 11.5 11.1346 11.424 11.27 11.2887C11.4053 11.1532 11.4813 10.9696 11.4813 10.7781C11.4813 10.5866 11.4053 10.403 11.27 10.2675L7.01186 6.00931Z"
-					fill="#6B7280"
-				/>
-			</svg>
+			<Icon name="mdiClose" variant="muted" size="sm" />
 		</Button>
 		<img :src="imageURL" alt="Captured image preview" @load="onPreviewLoad">
 	</div>
diff --git a/packages/web-forms/src/components/widgets/Icon.vue b/packages/web-forms/src/components/widgets/Icon.vue
index 618a2355..82b2c76f 100644
--- a/packages/web-forms/src/components/widgets/Icon.vue
+++ b/packages/web-forms/src/components/widgets/Icon.vue
@@ -3,15 +3,21 @@ import { computed } from 'vue';
 import {
 	mdiAlert,
 	mdiAlertCircleOutline,
+	mdiCamera,
 	mdiCheck,
+	mdiChevronDown,
+	mdiChevronUp,
 	mdiClose,
 	mdiDownload,
+	mdiDragVertical,
 	mdiEye,
 	mdiFileDocumentOutline,
+	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
 	mdiPrinter,
 	mdiRefresh,
+	mdiUnfoldMoreHorizontal,
 	mdiUpload,
 	mdiWeb,
 } from '@mdi/js';
@@ -20,15 +26,21 @@ import {
 const iconMap: Record<string, string> = {
 	mdiAlert,
 	mdiAlertCircleOutline,
+	mdiCamera,
 	mdiCheck,
+	mdiChevronDown,
+	mdiChevronUp,
 	mdiClose,
 	mdiDownload,
+	mdiDragVertical,
 	mdiEye,
 	mdiFileDocumentOutline,
+	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
 	mdiPrinter,
 	mdiRefresh,
+	mdiUnfoldMoreHorizontal,
 	mdiUpload,
 	mdiWeb,
 };
@@ -102,7 +114,7 @@ const iconSize = computed(() => props.size ?? 'md');
 	width: 14px;
 
 	path {
-		transform: scale(0.66) translate(-1px, -1px);
+		transform: scale(0.8) translate(-4px, -4px);;
 	}
 }
 

From d01c26bc61878b2a9fd0fc0b7f537a9b09f4d547 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 24 Apr 2025 20:06:49 -0600
Subject: [PATCH 04/11] Removed icomoon

---
 packages/web-forms/README.md                  |  18 +-
 packages/web-forms/icomoon.json               | 703 ------------------
 packages/web-forms/src/assets/css/icomoon.css | 114 ---
 .../src/assets/fonts/LICENSE-2.0.txt          | 202 -----
 .../web-forms/src/assets/fonts/icomoon.svg    |  39 -
 .../web-forms/src/assets/fonts/icomoon.ttf    | Bin 3624 -> 0 bytes
 .../web-forms/src/assets/fonts/icomoon.woff   | Bin 3700 -> 0 bytes
 .../widgets/MultiselectDropdown.vue           |   4 +-
 packages/web-forms/src/demo/demo.ts           |   2 -
 packages/web-forms/src/index.ts               |   1 -
 packages/web-forms/vite.config.ts             |   2 -
 11 files changed, 10 insertions(+), 1075 deletions(-)
 delete mode 100644 packages/web-forms/icomoon.json
 delete mode 100644 packages/web-forms/src/assets/css/icomoon.css
 delete mode 100644 packages/web-forms/src/assets/fonts/LICENSE-2.0.txt
 delete mode 100644 packages/web-forms/src/assets/fonts/icomoon.svg
 delete mode 100644 packages/web-forms/src/assets/fonts/icomoon.ttf
 delete mode 100644 packages/web-forms/src/assets/fonts/icomoon.woff

diff --git a/packages/web-forms/README.md b/packages/web-forms/README.md
index bde1f485..6ceba33b 100644
--- a/packages/web-forms/README.md
+++ b/packages/web-forms/README.md
@@ -106,18 +106,16 @@ This package uses the Material Design system for the UI, though not strictly. Th
 
 ### Icons
 
-We use **Material Icons** using IcoMoon to select a subset of icons in order to minimize the size. The font files are located in [`./src/assets/fonts/`](./src/assets/fonts/), and the CSS is [`./src/assets/css/icomoon.css`](/src/assets/css/icomoon.css). Our IcoMoon definition is in the root directory of this package at [`./icomoon.json`](./icomoon.json).
+The `Icon` component renders Material Design Icons (MDI) with customizable size and style variants. It uses the `@mdi/js` library for icon data and supports a predefined set of icons.
 
-To update the icons using the [IcoMoon website](https://icomoon.io/app/):
+```js
+<Icon name="mdiCamera" size="md" variant="primary" />
+```
 
-1. Click the "Import Icons" button in IcoMoon. Select [`icomoon.json`](/icomoon.json). When prompted, load the settings stored in the file.
-2. Scroll down to the "Add Icons From Library" link and add **Material Icons**.
-3. Move the imported set above Material Icons, using the 3-bar icon to the right of the imported set's title. (This should help preserve the icon order and minimize the diff.)
-4. Update the icons by selecting (highlighting) the new icons to add. They don't need to be moved or altered.
-5. Download the new font, then copy the files (`icomoon.css`, `fonts/*`, `icomoon.json`) into their locations in the repository.
-   - You will need to rename the files and update the paths in the CSS (`fonts/icomoon.ttf?...` becomes `/fonts/icomoon.ttf?...` with a beginning slash).
-   - You will also need to prettify the JSON file to use two space indentation.
+To add a new icon:
 
-By following the steps above, you should minimize the diff. However, in the JSON file, you may still see changes for properties like `id`, `iconIdx`, `setId`, and `setIdx`.
+- Import the icon from `@mdi/js` in the `Icon` component.
+- Add the icon to the `iconMap` object with its corresponding name.
+- Use the icon by passing its name to the `name` prop.
 
 Material Icons are available under the Apache License Version 2.0. Copy of the license can be found at [`./src/assets/fonts/LICENSE-2.0.txt`](./src/assets/fonts/LICENSE-2.0.txt)
diff --git a/packages/web-forms/icomoon.json b/packages/web-forms/icomoon.json
deleted file mode 100644
index dd2f3bf6..00000000
--- a/packages/web-forms/icomoon.json
+++ /dev/null
@@ -1,703 +0,0 @@
-{
-  "IcoMoonType": "selection",
-  "icons": [
-    {
-      "icon": {
-        "paths": [
-          "M726 554v-84h-172v-172h-84v172h-172v84h172v172h84v-172h172zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["add_circle"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "add_circle",
-        "id": 0,
-        "order": 282,
-        "prevSize": 48,
-        "code": 59648,
-        "name": "add_circle"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 0
-    },
-    {
-      "icon": {
-        "paths": [
-          "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["clear", "close"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "clear, close",
-        "id": 1,
-        "order": 287,
-        "prevSize": 48,
-        "code": 59649,
-        "name": "clear"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 1
-    },
-    {
-      "icon": {
-        "paths": [
-          "M884 300l-78 78-160-160 78-78q12-12 30-12t30 12l100 100q12 12 12 30t-12 30zM128 736l472-472 160 160-472 472h-160v-160z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["create", "mode_edit", "edit"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "create, mode_edit, edit",
-        "id": 2,
-        "order": 290,
-        "prevSize": 48,
-        "code": 59650,
-        "name": "create"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 2
-    },
-    {
-      "icon": {
-        "paths": [
-          "M512 810q124 0 211-87t87-211-87-211-211-87-211 87-87 211 87 211 211 87zM894 470h88v84h-88q-14 126-114 226t-226 114v88h-84v-88q-126-14-226-114t-114-226h-88v-84h88q14-126 114-226t226-114v-88h84v88q126 14 226 114t114 226zM512 342q70 0 120 50t50 120-50 120-120 50-120-50-50-120 50-120 120-50z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["gps_fixed", "my_location"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "gps_fixed, my_location",
-        "id": 3,
-        "order": 286,
-        "prevSize": 48,
-        "code": 59651,
-        "name": "gps_fixed"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 3
-    },
-    {
-      "icon": {
-        "paths": [
-          "M598 554h128l-214-212-214 212h128v172h172v-172zM826 428q82 6 140 67t58 145q0 88-63 151t-151 63h-554q-106 0-181-75t-75-181q0-94 67-169t161-85q42-78 118-126t166-48q108 0 201 76t113 182z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["cloud_upload", "backup"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "cloud_upload, backup",
-        "id": 4,
-        "order": 291,
-        "prevSize": 48,
-        "code": 59652,
-        "name": "cloud_upload"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 4
-    },
-    {
-      "icon": {
-        "paths": ["M214 768h596v86h-596v-86zM810 384l-298 298-298-298h170v-256h256v256h170z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["file_download", "get_app"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "file_download, get_app",
-        "id": 5,
-        "order": 289,
-        "prevSize": 48,
-        "code": 59653,
-        "name": "file_download"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 5
-    },
-    {
-      "icon": {
-        "paths": ["M214 768h596v86h-596v-86zM384 682v-256h-170l298-298 298 298h-170v256h-256z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["file_upload"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "file_upload",
-        "id": 6,
-        "order": 288,
-        "prevSize": 48,
-        "code": 59654,
-        "name": "file_upload"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 6
-    },
-    {
-      "icon": {
-        "paths": ["M316 366l196 196 196-196 60 60-256 256-256-256z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["keyboard_arrow_down"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "keyboard_arrow_down",
-        "id": 7,
-        "order": 275,
-        "prevSize": 48,
-        "code": 59655,
-        "name": "keyboard_arrow_down"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 7
-    },
-    {
-      "icon": {
-        "paths": ["M658 708l-60 60-256-256 256-256 60 60-196 196z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["keyboard_arrow_left"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "keyboard_arrow_left",
-        "id": 8,
-        "order": 276,
-        "prevSize": 48,
-        "code": 59656,
-        "name": "keyboard_arrow_left"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 8
-    },
-    {
-      "icon": {
-        "paths": ["M366 708l196-196-196-196 60-60 256 256-256 256z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["keyboard_arrow_right"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "keyboard_arrow_right",
-        "id": 9,
-        "order": 277,
-        "prevSize": 48,
-        "code": 59657,
-        "name": "keyboard_arrow_right"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 9
-    },
-    {
-      "icon": {
-        "paths": ["M316 658l-60-60 256-256 256 256-60 60-196-196z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["keyboard_arrow_up"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "keyboard_arrow_up",
-        "id": 10,
-        "order": 278,
-        "prevSize": 48,
-        "code": 59658,
-        "name": "keyboard_arrow_up"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 10
-    },
-    {
-      "icon": {
-        "paths": [
-          "M768 128v170h-512v-170h512zM810 512q18 0 31-12t13-30-13-31-31-13-30 13-12 31 12 30 30 12zM682 810v-212h-340v212h340zM810 342q52 0 90 38t38 90v256h-170v170h-512v-170h-170v-256q0-52 38-90t90-38h596z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["local_printshop", "print"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "local_printshop, print",
-        "id": 11,
-        "order": 274,
-        "prevSize": 48,
-        "code": 59659,
-        "name": "local_printshop"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 11
-    },
-    {
-      "icon": {
-        "paths": ["M298 426h428l-214 214z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["arrow_drop_down"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "arrow_drop_down",
-        "id": 12,
-        "order": 293,
-        "prevSize": 48,
-        "code": 59660,
-        "name": "arrow_drop_down"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 12
-    },
-    {
-      "icon": {
-        "paths": ["M298 598l214-214 214 214h-428z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["arrow_drop_up"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "arrow_drop_up",
-        "id": 13,
-        "order": 294,
-        "prevSize": 48,
-        "code": 59661,
-        "name": "arrow_drop_up"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 13
-    },
-    {
-      "icon": {
-        "paths": [
-          "M512 682q34 0 60 26t26 60-26 60-60 26-60-26-26-60 26-60 60-26zM512 426q34 0 60 26t26 60-26 60-60 26-60-26-26-60 26-60 60-26zM512 342q-34 0-60-26t-26-60 26-60 60-26 60 26 26 60-26 60-60 26z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["more_vert"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "more_vert",
-        "id": 14,
-        "order": 281,
-        "prevSize": 48,
-        "code": 59662,
-        "name": "more_vert"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 14
-    },
-    {
-      "icon": {
-        "paths": [
-          "M810 170v86h-596v-86h148l44-42h212l44 42h148zM256 810v-512h512v512q0 34-26 60t-60 26h-340q-34 0-60-26t-26-60z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["delete"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "delete",
-        "id": 15,
-        "order": 284,
-        "prevSize": 48,
-        "code": 59663,
-        "name": "delete"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 15
-    },
-    {
-      "icon": {
-        "paths": [
-          "M554 384v-86h-84v86h84zM554 726v-256h-84v256h84zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["info"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "info",
-        "id": 16,
-        "order": 292,
-        "prevSize": 48,
-        "code": 59664,
-        "name": "info"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 16
-    },
-    {
-      "icon": {
-        "paths": [
-          "M698 598h144q12-56 12-86t-12-86h-144q6 42 6 86t-6 86zM622 834q50-16 104-61t82-91h-126q-20 80-60 152zM612 598q6-42 6-86t-6-86h-200q-6 42-6 86t6 86h200zM512 852q56-82 82-170h-164q26 88 82 170zM342 342q24-86 60-152-50 16-105 61t-81 91h126zM216 682q26 46 81 91t105 61q-40-72-60-152h-126zM182 598h144q-6-42-6-86t6-86h-144q-12 56-12 86t12 86zM512 172q-56 82-82 170h164q-26-88-82-170zM808 342q-28-46-82-91t-104-61q36 66 60 152h126zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["language"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "language",
-        "id": 17,
-        "order": 283,
-        "prevSize": 48,
-        "code": 59665,
-        "name": "language"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 17
-    },
-    {
-      "icon": {
-        "paths": [
-          "M406 598q80 0 136-56t56-136-56-136-136-56-136 56-56 136 56 136 136 56zM662 598l212 212-64 64-212-212v-34l-12-12q-76 66-180 66-116 0-197-80t-81-196 81-197 197-81 196 81 80 197q0 42-20 95t-46 85l12 12h34z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["search"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "search",
-        "id": 18,
-        "order": 285,
-        "prevSize": 48,
-        "code": 59666,
-        "name": "search"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 18
-    },
-    {
-      "icon": {
-        "paths": [
-          "M854 896v-554h-684v554h684zM854 128q34 0 59 26t25 60v682q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-682q0-34 25-60t59-26h44v-86h84v86h428v-86h84v86h44z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["calendar_today"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "calendar_today",
-        "id": 19,
-        "order": 279,
-        "prevSize": 48,
-        "code": 59667,
-        "name": "calendar_today"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 19
-    },
-    {
-      "icon": {
-        "paths": [
-          "M726 726v-172h84v256h-512v128l-170-170 170-170v128h428zM298 298v172h-84v-256h512v-128l170 170-170 170v-128h-428z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["repeat"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "repeat",
-        "id": 20,
-        "order": 297,
-        "prevSize": 48,
-        "code": 59668,
-        "name": "repeat"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 20
-    },
-    {
-      "icon": {
-        "paths": ["M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["menu"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "menu",
-        "id": 21,
-        "order": 299,
-        "prevSize": 48,
-        "code": 59669,
-        "name": "menu"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 21
-    },
-    {
-      "icon": {
-        "paths": ["M384 690l452-452 60 60-512 512-238-238 60-60z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["check"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "check",
-        "id": 22,
-        "order": 322,
-        "prevSize": 48,
-        "code": 59670,
-        "name": "check"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 22
-    },
-    {
-      "icon": {
-        "paths": [
-          "M554 554v-256h-84v256h84zM554 726v-86h-84v86h84zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["error"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "error",
-        "id": 46,
-        "order": 347,
-        "prevSize": 48,
-        "code": 59671,
-        "name": "error"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 23
-    },
-    {
-      "icon": {
-        "paths": [
-          "M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM470 298h84v256h-84v-256zM470 640h84v86h-84v-86z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["error_outline"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "error_outline",
-        "id": 71,
-        "order": 373,
-        "prevSize": 48,
-        "code": 59672,
-        "name": "error_outline"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 24
-    },
-    {
-      "icon": {
-        "paths": ["M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["add"],
-        "grid": 24,
-        "defaultCode": 59673
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "add",
-        "id": 79,
-        "order": 83,
-        "prevSize": 48,
-        "name": "add",
-        "code": 59673
-      },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 25
-    },
-    {
-      "icon": {
-        "paths": [
-          "M554 384h236l-236-234v234zM256 86h342l256 256v512q0 34-26 59t-60 25h-512q-34 0-60-25t-26-59l2-684q0-34 25-59t59-25z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["insert_drive_file"],
-        "grid": 24,
-        "defaultCode": 59680
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "insert_drive_file",
-        "id": 80,
-        "order": 84,
-        "prevSize": 48,
-        "name": "insert_drive_file",
-        "code": 59680
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 26
-    },
-    {
-      "icon": {
-        "paths": [
-          "M512 384q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM512 726q88 0 151-63t63-151-63-151-151-63-151 63-63 151 63 151 151 63zM512 192q158 0 286 88t184 232q-56 144-184 232t-286 88-286-88-184-232q56-144 184-232t286-88z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": ["remove_red_eye", "visibility"],
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "remove_red_eye, visibility",
-        "id": 53,
-        "order": 85,
-        "prevSize": 48,
-        "code": 59674,
-        "name": "remove_red_eye"
-      },
-      "setIdx": 0,
-      "setId": 0,
-      "iconIdx": 27
-    }
-  ],
-  "height": 1024,
-  "metadata": {
-    "name": "icomoon"
-  },
-  "preferences": {
-    "showGlyphs": true,
-    "showQuickUse": true,
-    "showQuickUse2": true,
-    "showSVGs": true,
-    "fontPref": {
-      "prefix": "icon-",
-      "metadata": {
-        "fontFamily": "icomoon",
-        "majorVersion": 1,
-        "minorVersion": 0
-      },
-      "metrics": {
-        "emSize": 1024,
-        "baseline": 6.25,
-        "whitespace": 50
-      },
-      "embed": false,
-      "showSelector": true,
-      "showMetrics": true,
-      "showMetadata": true,
-      "showVersion": true,
-      "noie8": true,
-      "ie7": false
-    },
-    "imagePref": {
-      "prefix": "icon-",
-      "png": true,
-      "useClassSelector": true,
-      "color": 0,
-      "bgColor": 16777215,
-      "classSelector": ".icon",
-      "name": "icomoon",
-      "height": 32,
-      "columns": 16,
-      "margin": 16
-    },
-    "historySize": 50,
-    "showCodes": false,
-    "gridSize": 16,
-    "showLiga": false
-  }
-}
diff --git a/packages/web-forms/src/assets/css/icomoon.css b/packages/web-forms/src/assets/css/icomoon.css
deleted file mode 100644
index cdf4615a..00000000
--- a/packages/web-forms/src/assets/css/icomoon.css
+++ /dev/null
@@ -1,114 +0,0 @@
-@font-face {
-	font-family: 'owf-icomoon';
-	src:
-		url('/fonts/icomoon.ttf?d2anc2') format('truetype'),
-		url('/fonts/icomoon.woff?d2anc2') format('woff'),
-		url('/fonts/icomoon.svg?d2anc2#icomoon') format('svg');
-	font-weight: normal;
-	font-style: normal;
-	font-display: block;
-}
-
-[class^='icon-'],
-[class*=' icon-'] {
-	/* use !important to prevent issues with browser extensions that change fonts */
-	font-family: 'owf-icomoon' !important;
-	speak: never;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-
-	/* Better Font Rendering =========== */
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-.icon-add_circle:before {
-	content: '\e900';
-}
-.icon-clear:before {
-	content: '\e901';
-}
-.icon-create:before {
-	content: '\e902';
-}
-.icon-gps_fixed:before {
-	content: '\e903';
-}
-.icon-cloud_upload:before {
-	content: '\e904';
-}
-.icon-file_download:before {
-	content: '\e905';
-}
-.icon-file_upload:before {
-	content: '\e906';
-}
-.icon-keyboard_arrow_down:before {
-	content: '\e907';
-}
-.icon-keyboard_arrow_left:before {
-	content: '\e908';
-}
-.icon-keyboard_arrow_right:before {
-	content: '\e909';
-}
-.icon-keyboard_arrow_up:before {
-	content: '\e90a';
-}
-.icon-local_printshop:before {
-	content: '\e90b';
-}
-.icon-arrow_drop_down:before {
-	content: '\e90c';
-}
-.icon-arrow_drop_up:before {
-	content: '\e90d';
-}
-.icon-more_vert:before {
-	content: '\e90e';
-}
-.icon-delete:before {
-	content: '\e90f';
-}
-.icon-info:before {
-	content: '\e910';
-}
-.icon-language:before {
-	content: '\e911';
-}
-.icon-search:before {
-	content: '\e912';
-}
-.icon-calendar_today:before {
-	content: '\e913';
-}
-.icon-repeat:before {
-	content: '\e914';
-}
-.icon-menu:before {
-	content: '\e915';
-}
-.icon-check:before {
-	content: '\e916';
-}
-.icon-error:before {
-	content: '\e917';
-}
-.icon-error_outline:before {
-	content: '\e918';
-}
-.icon-add:before {
-	content: '\e919';
-}
-.icon-insert_drive_file:before {
-	content: '\e920';
-}
-.icon-remove_red_eye:before {
-	content: '\e91a';
-}
-.icon-warning:before {
-	content: '\e91b';
-}
diff --git a/packages/web-forms/src/assets/fonts/LICENSE-2.0.txt b/packages/web-forms/src/assets/fonts/LICENSE-2.0.txt
deleted file mode 100644
index d6456956..00000000
--- a/packages/web-forms/src/assets/fonts/LICENSE-2.0.txt
+++ /dev/null
@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
diff --git a/packages/web-forms/src/assets/fonts/icomoon.svg b/packages/web-forms/src/assets/fonts/icomoon.svg
deleted file mode 100644
index d9ecc63b..00000000
--- a/packages/web-forms/src/assets/fonts/icomoon.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="add_circle" d="M726 384.667v84h-172v172h-84v-172h-172v-84h172v-172h84v172h172zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
-<glyph unicode="&#xe901;" glyph-name="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
-<glyph unicode="&#xe902;" glyph-name="create" d="M884 638.667l-78-78-160 160 78 78q12 12 30 12t30-12l100-100q12-12 12-30t-12-30zM128 202.667l472 472 160-160-472-472h-160v160z" />
-<glyph unicode="&#xe903;" glyph-name="gps_fixed" d="M512 128.667q124 0 211 87t87 211-87 211-211 87-211-87-87-211 87-211 211-87zM894 468.667h88v-84h-88q-14-126-114-226t-226-114v-88h-84v88q-126 14-226 114t-114 226h-88v84h88q14 126 114 226t226 114v88h84v-88q126-14 226-114t114-226zM512 596.667q70 0 120-50t50-120-50-120-120-50-120 50-50 120 50 120 120 50z" />
-<glyph unicode="&#xe904;" glyph-name="cloud_upload" d="M598 384.667h128l-214 212-214-212h128v-172h172v172zM826 510.667q82-6 140-67t58-145q0-88-63-151t-151-63h-554q-106 0-181 75t-75 181q0 94 67 169t161 85q42 78 118 126t166 48q108 0 201-76t113-182z" />
-<glyph unicode="&#xe905;" glyph-name="file_download" d="M214 170.667h596v-86h-596v86zM810 554.667l-298-298-298 298h170v256h256v-256h170z" />
-<glyph unicode="&#xe906;" glyph-name="file_upload" d="M214 170.667h596v-86h-596v86zM384 256.667v256h-170l298 298 298-298h-170v-256h-256z" />
-<glyph unicode="&#xe907;" glyph-name="keyboard_arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" />
-<glyph unicode="&#xe908;" glyph-name="keyboard_arrow_left" d="M658 230.667l-60-60-256 256 256 256 60-60-196-196z" />
-<glyph unicode="&#xe909;" glyph-name="keyboard_arrow_right" d="M366 230.667l196 196-196 196 60 60 256-256-256-256z" />
-<glyph unicode="&#xe90a;" glyph-name="keyboard_arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" />
-<glyph unicode="&#xe90b;" glyph-name="local_printshop" d="M768 810.667v-170h-512v170h512zM810 426.667q18 0 31 12t13 30-13 31-31 13-30-13-12-31 12-30 30-12zM682 128.667v212h-340v-212h340zM810 596.667q52 0 90-38t38-90v-256h-170v-170h-512v170h-170v256q0 52 38 90t90 38h596z" />
-<glyph unicode="&#xe90c;" glyph-name="arrow_drop_down" d="M298 512.667h428l-214-214z" />
-<glyph unicode="&#xe90d;" glyph-name="arrow_drop_up" d="M298 340.667l214 214 214-214h-428z" />
-<glyph unicode="&#xe90e;" glyph-name="more_vert" d="M512 256.667q34 0 60-26t26-60-26-60-60-26-60 26-26 60 26 60 60 26zM512 512.667q34 0 60-26t26-60-26-60-60-26-60 26-26 60 26 60 60 26zM512 596.667q-34 0-60 26t-26 60 26 60 60 26 60-26 26-60-26-60-60-26z" />
-<glyph unicode="&#xe90f;" glyph-name="delete" d="M810 768.667v-86h-596v86h148l44 42h212l44-42h148zM256 128.667v512h512v-512q0-34-26-60t-60-26h-340q-34 0-60 26t-26 60z" />
-<glyph unicode="&#xe910;" glyph-name="info" d="M554 554.667v86h-84v-86h84zM554 212.667v256h-84v-256h84zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
-<glyph unicode="&#xe911;" glyph-name="language" d="M698 340.667h144q12 56 12 86t-12 86h-144q6-42 6-86t-6-86zM622 104.667q50 16 104 61t82 91h-126q-20-80-60-152zM612 340.667q6 42 6 86t-6 86h-200q-6-42-6-86t6-86h200zM512 86.667q56 82 82 170h-164q26-88 82-170zM342 596.667q24 86 60 152-50-16-105-61t-81-91h126zM216 256.667q26-46 81-91t105-61q-40 72-60 152h-126zM182 340.667h144q-6 42-6 86t6 86h-144q-12-56-12-86t12-86zM512 766.667q-56-82-82-170h164q-26 88-82 170zM808 596.667q-28 46-82 91t-104 61q36-66 60-152h126zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
-<glyph unicode="&#xe912;" glyph-name="search" d="M406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-42-20-95t-46-85l12-12h34z" />
-<glyph unicode="&#xe913;" glyph-name="calendar_today" d="M854 42.667v554h-684v-554h684zM854 810.667q34 0 59-26t25-60v-682q0-34-25-60t-59-26h-684q-34 0-59 26t-25 60v682q0 34 25 60t59 26h44v86h84v-86h428v86h84v-86h44z" />
-<glyph unicode="&#xe914;" glyph-name="repeat" d="M726 212.667v172h84v-256h-512v-128l-170 170 170 170v-128h428zM298 640.667v-172h-84v256h512v128l170-170-170-170v128h-428z" />
-<glyph unicode="&#xe915;" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" />
-<glyph unicode="&#xe916;" glyph-name="check" d="M384 248.667l452 452 60-60-512-512-238 238 60 60z" />
-<glyph unicode="&#xe917;" glyph-name="error" d="M554 384.667v256h-84v-256h84zM554 212.667v86h-84v-86h84zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
-<glyph unicode="&#xe918;" glyph-name="error_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM470 640.667h84v-256h-84v256zM470 298.667h84v-86h-84v86z" />
-<glyph unicode="&#xe919;" glyph-name="add" d="M810 384.667h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
-<glyph unicode="&#xe91a;" glyph-name="remove_red_eye" d="M512 554.667q52 0 90-38t38-90-38-90-90-38-90 38-38 90 38 90 90 38zM512 212.667q88 0 151 63t63 151-63 151-151 63-151-63-63-151 63-151 151-63zM512 746.667q158 0 286-88t184-232q-56-144-184-232t-286-88-286 88-184 232q56 144 184 232t286 88z" />
-<glyph unicode="&#xe91b;" glyph-name="warning" d="M554 340.667v172h-84v-172h84zM554 170.667v86h-84v-86h84zM42 42.667l470 810 470-810h-940z" />
-<glyph unicode="&#xe920;" glyph-name="insert_drive_file" d="M554 554.667h236l-236 234v-234zM256 852.667h342l256-256v-512q0-34-26-59t-60-25h-512q-34 0-60 25t-26 59l2 684q0 34 25 59t59 25z" />
-</font></defs></svg>
\ No newline at end of file
diff --git a/packages/web-forms/src/assets/fonts/icomoon.ttf b/packages/web-forms/src/assets/fonts/icomoon.ttf
deleted file mode 100644
index 63e3fe1779e424de7a9d2b15920ace0b45cd716b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3624
zcmcgvU2I!P6+Sc9vFp?{brR=pvr*TM8@t^6Y}Sr_v%9VuwW!){vc+U?E)nW3b>on>
zO6(|gr52Uqpw$YYN<=FJ+m}+IKDk$DC0-EfLxuXl0}niys}({Bv4|zhs_+00TktjC
z%)NFUw;-N4&di)SbLPyMGvA!KAx1>|sY(h>fAP&1Q+@sZmm#^2a&Bd#u(^A7_s>LZ
z1pTvXh0B|052Ak+?Y_13YhU|`@k2lQRifbi3#*0V=hMF_!(a~M*$WT^ey;oh{R;X=
zE^Jh;ejN<@@1uHWy}VKweLPko3JLpP*eG1xqzN+7KZky_RM=R(bvpP@^s89o-Ocjl
z3j72e*eAwGQU1zysE3H(;=hFCyKc+=LTMHhdL6{z_FkGJ+Knm?nh$7BLBXJiMT?@6
z5vz$Zf-$#Mq}B-e<ctvQBMzQXbocq)XtU95%6ZXU*p@xk{7Chw!b+!gu@-}FpOC@>
zf(M*Pe_1O1uQJSNK2U0yyPuwi$xJ*GkHjPCNIIjW)S<{=z#kt?CNeX6mfMzLS%&t(
zH$WfAnr#b-WwCloBILq-xxS)FyTk%&AQ?#NNnO<y?a`xL>yO`RaS#db;Y(G{5eUJI
zY&!J<gBL-jvba(?bLUK`zduwAHHdw9$2oe3e^ZDc=<j#tqzG#x%CKX@P9Kfat3+cd
zJ)4<HCgP(3e`HV{V(CcSAMghv@k}C_NX9eite({~>Bx{eG}gUqy8dO*by>5=%gYCf
z#T&+rV)4Ke*4a6g0-ciec1u}IVMdp#JBzoJ#T0knK5>42dI9@RCj*H80GyHGk9qNj
ziwK80#LcR0SFJxTzVgcP<I4^E()|3%lW%Ja3tw4(>n*ljuUky>A3J6&A3r`nf9dV{
z`Q9_r(+dlLxQvT96NP$#lvpGd<mqrMY;&Vwal^44yT<6A$-pp;5rFuNIeIuAWN~*=
ztp+`<cF(i`M$NG$bltNT`{}`MR9y`+mV5Xx*MvcSOfpX}%HMPK#sWCw0Dli!jB*b@
z&cPtsHkP=+DC~^^MX*<b8R6i^p53;d(pone1b|r1v%?Nab!pJo#=JrUq*4-IMq(M(
zg%Twbi!gzPa2%uYFs?vaA&0ou|2YtF2r4-M|4brLbEuX`%qZivno|t{jx80(uGd)|
zLrp@k2&(Sg-~ykBE{g>aLd)jNZttNzrmIY|ZMI~~F^Ow#VqPC`@*?JTVRfLZuY1T5
zs1Z=&G&&3#{jW7+of?cfdq!uc0~-OvQN}Q>r&R_-iL@bbt7r}DdlU5u=Moo&91BY;
z%rrHvQRRrG^hE62y|dzs6$;=?L?((1gyZ4vJ#o!2_T(TwZki4v3v5;QW+7nQ%WXlt
zIKzlpf+k6)9G#>$u|irTg*YOki0dEsCuLt`2o>ESNJWwe;~uJsWHK$1U>u{&A4n%4
zNhF8Vr*h=ac0!>Y|6(ee9l0@>^80_`_ZMe}?+$N0cO<3j!^66sIy!h~$M4?>F;fiu
zZ6upb9eJ+SnN^o&4<DY@CMKLu4o*%^<?n*kL~$0Emziar5K_mQnw&iNTHX)?&}Um1
zTo$quCZj!paPROXiJPMWHG8vR49Pi@Y^V7aSOO~hets5|mo>}R=jx$_3zaW{DwTYG
zaBw)pmRiF?2@0d36Zw3_)zLDUXh@u`yS{t2$Zuo7hkLJDD9MPs^(sRGj-e=K!{FBF
zA<$^UaN7xkS;jcm8nz;E)G%EL^BP(c<gHP~9`{igYh;kuB1t_Gj>N;Uj2g&r+rSmA
z864HGttM4#wJO8QC7Blf#C(Cj{X_%EjuB*l9+av=4ah~|_sqIs*jN#Pl=u>Jdaxp1
zsHD!S>|xHKN4d|uR_y<2Yy;P-z<1YueG1!bTj1I<&2DJpd!dDGkqhD?hjqVl-PYAK
z5*c1TPB&LUH{H4eckkk68B6UEj4OM9RBuwpzBTL{abhuSCYFhX5pYFok|FZ9f#kjI
zG4e_9V&J~X{~>qnMWygw#r+dsA4%L#E>b7bs9WQ0!`tW9x2x6J*=qH+*YfeU7Id9j
zTMycNXnA>O2lqtQPtHd8CC(igL*yNCHa$TmkHayTjo*@G)l9RhX#cW3tcg6#W!_6C
z$6~CV@-hSBTS@!$Q@o+Li6ZNXG{+Ae;^UvpHAT{s(3TJv7!pPO?GJ8!wJ-M%+K+<;
zebjsUvnOryf&4na_p(@966VP7P5}fEYGJ99V(y4564ONg|6Szjy);ON=`<DT+w^-j
z$fnq9>@3@4@38mThwM-6?>xuP^P9>+C9ix-`H^y8`IYk6H|tyU-S+*|_dB_>7#ZSp
zK&=SKj#nL^AA9>}IK@^hIQVm(T%2y!<9*<-czh2q9PxNR<ntcii}&I?zy$LJAvu5%
zm*?QuJYE5R%;SCFuX}tC4N=tN{g5wud@s$=-HR*bjdHm}7iopcw1HBllDWEd`C_>g
zeQ9bM|GTWx7F~t{24LqUnxg4v&U&VBadqv=dSMHTuENnPv`z)udZy;7a;XwsTP>|_
z6)LO6==p2W*H_AKz_%$nCD*QC^);9&NskItL0g3EJY7Tmy4=7U?grqa%yXTG(#`)H
Dm7?^g

diff --git a/packages/web-forms/src/assets/fonts/icomoon.woff b/packages/web-forms/src/assets/fonts/icomoon.woff
deleted file mode 100644
index b3e43aaf9fb9a9c260d74e4ba7ee66f7476dfc75..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3700
zcmcguUu>IK6+icWjy<O)iIX_rnnj%*H+K2*XI&iI+2*QMi=wT`x{!VOh)_3{CMIc>
z*j4I^6_w(kX_`<aqG<y9QYzFZ_Y<1L3qpH{P#$>Tfd^wv2qDBKM#fZlfQJ=q^E>zZ
z>^g2iJaO!M@44rmbMLw5{_eToH(r^UAwi(70v%HAF{jV`L3-uYXC{fn6Og{arMuVr
z+{)(iWysdiKhI_V{QjTUmanjE4}I3<(zCX4?dy>Jipc)~m!FzH@~&r>SBVb2gYguX
zFD8DQUxyH~UG$G~@%=*k<N9XdO~^h*|1B=xM75D$fnI>u{Sueq2P3)7<u|czz(zl;
z${1O><;^T)SXaEw<<?pMKQHI66tG{jsi%R{w7-fS>L8N0B(&*!PAmRG3E@Y-l|)Z#
zkNHzX`(bUjzDuVx6i8G|(K3ZqtyTdygfZraP_xz$d6Y!}k&@sAh4-J@57(>py0Q!J
zV{X+G^^bIq4qug>8dQ}a0o`tv!UKW_k|_P0a^ZiK!J@vam0){_o`U<yXfhg#h7zGf
zQk&EVLj68(bT}SMPNh?_Vw<*Y8t;D#^uDUaHcM<<lp7M3vvX>F%~11_@aev|FP@I4
z^|WT(zn^LR<*fz>5ql3`ipmC|7O+SqCZ87Y!Y_0Y)e7hCoD1~!237-A5+B~F9lImH
z%_0bTduykZ2x}wCn5Tkyx@nYNAR3uWr;=0gSajIu4fX2-A`yyueO_NEnvBI`@n|xU
zN~hAvL})-C7-`=%UH=N`x~j#4rKPUb)f?uG)zz+tY;9*|5;UXg?S?X&2(wMqv62mC
zHgWdt;q&v-)7W<+?nC_h;EW1?#Em~(L^$*TX%#D#qW$s0^Ut3=xm2xOnw>p!=5=Fk
z?yDQGy(YHHWm_2D6DQ22lP70qFTFlH+j;Kz@wqubT*ZaYM59h1B@&AGWg-{}R-{?A
zrCF=gDkVYpECEIsf&j$F*rbC|zlb_Ur4sav(ml%t7>!y*LDxBZ-cJX1qo;Mh5ShKb
zOdS)-6N-6=QTeW;H{!z?`{cXO5|r8dB!dajHnAibqnK|5D8hU>Ov4U-;?CRD(;Dl>
z{Q!{2xbuj^N?lFpX<}ZZKGG=;FGG=}XhVsXjD!TEAsEGIG>9vZ(5Obz==}l+I0WTt
z0RL1hR;p1c7Ms#WOQl*d05~>OYL#+XlrdB%1dE{R+zrY2M07>OhY;EoDJso9G{@4q
zFe(+XSW#mN*V2MrH*oR{Y}>Hf*Va$F$YInllq3xgf`<QVEkvt^pw^z*+G)Xt4{=m6
zOr#UK0HQc;Fm5%YYQHyD9;;oFJW<WY(weX=!>AS|VyQggeLHuS&sZZL&V(~js4o}|
zw(m(Arg<O-$x+LyA+o?$@n9AL#@*cJryd$a%wjZ7Y0A(UdKD`qI4MLC8I7-h)EifQ
z&Ja4f1CVl(2;v^<v3NYeNid30;q@hAki_Bx`Xf2==R1MGj(1@)l^VLyKk4=U((7HF
z9=toa_2kjXbb4?wot`|_e`m+*-3bVb2mUscN=+VpvecSY7pIRLnKs78YM=Iuk5A0s
z1#57rEi5ew+d9qCnmsW--t*$T$pg?ATNqqo*=bAAfj~HS_>#iSF-Fb7Y#2duPR5&Q
zz5y1WF1|lM4VqWAm@l6y2j<obUj`Kl^Yi`vg8{MF7-l6X3<pln&lemWBbf{b_-vi^
zowG%L8v#C?d(}WmlJC|F0tq;RqFGf_+QWxI!&TF1$4p_Hqtd8WG{#ZYav&^AXf2St
zMiF~_f`V8hiM$qyr$fO|G#E+hzND;}xS}OfqWX<pr(&s86nME5)4(6wGyd>J)Q9XC
zLI&tSDQZ-OoQu3?l})pP6%j~<FShBxig=;oX;Bn=nHt^CeD1cq|3|S6T<eVQw)^@B
zw#7E%+P18AXybdKfo;wOQO;rQuUz}=dIE_IFQ25FS<p?VZo%E#xLM|6a|Gks0U(v@
z)Us~_`$n8Z1e=K@BS8dQGwNh={x*@kw_Qd(32qFWH~By0u7jv#?{(Zi{`!dHeo9WA
zNTW`Tw+(NfQ{OHYr>Bd>+iojIn_AGVm703cmIF&mJ3F{1s(yGj>=&OqG6v@zKAR4|
zP{&a-MFqb_+b&sFQ8WHkak0jESgO32h>t`>Gvy`w_*=>N>@&QfxQU$gIL*n!hvn#}
zr|O*a6toq@8ADw3-~Hg$*Sa(RphGxV&_|tTKY!TPch%Pce^cWwDT0mq?qnc<Q1eW!
z6mdoz5u0)U|6SDTozzc9=q#<$JM;(9FDAr`;=H&l-V#3)ABsPTzsrogAa80t+PwB1
z?Z?^&+OM?-o@vj5=eFl(p5LpTMabmS0W~6^I&RfPKXLajaEgssNbqmCaz5RZ%X`3I
zb@>ipIOOtP$Y))?6Ys@$feGR9L(+v2hnL{jTwViz!sR{Sue*E)4N%zSy^t@sd?!uO
z-HR*v&3ryb7iop^w26|ZoR!_WaxtF^KRa=pEXvXrU4a4yFwe6zLB}6!^;qFTcJ1oM
z@)j1&!qKa=LCduDSk0Myt`J_!=CWJMh3snh!nN>AEBTk<+XT(1wF_8%4b$Y5N6S<|
ay9(I_x`z5CwSkwN4Zug0=UNY?o&PsLr~9@5

diff --git a/packages/web-forms/src/components/widgets/MultiselectDropdown.vue b/packages/web-forms/src/components/widgets/MultiselectDropdown.vue
index 2f5fcc7f..7c371f8e 100644
--- a/packages/web-forms/src/components/widgets/MultiselectDropdown.vue
+++ b/packages/web-forms/src/components/widgets/MultiselectDropdown.vue
@@ -87,8 +87,8 @@ if (props.question.appearances['no-buttons']) {
 
 	.p-multiselect-option {
 		&[aria-selected='true']::after {
-			content: '\e916';
-			font-family: 'owf-icomoon';
+			content: '\2713';
+			font-family: system-ui;
 			color: var(--odk-primary-text-color);
 		}
 
diff --git a/packages/web-forms/src/demo/demo.ts b/packages/web-forms/src/demo/demo.ts
index 8c3a9971..63ff319a 100644
--- a/packages/web-forms/src/demo/demo.ts
+++ b/packages/web-forms/src/demo/demo.ts
@@ -9,14 +9,12 @@ import hankenGrotesk400 from '@fontsource/hanken-grotesk/400.css?inline';
 import roboto300 from '@fontsource/roboto/300.css?inline';
 import roboto400 from '@fontsource/roboto/400.css?inline';
 import roboto500 from '@fontsource/roboto/500.css?inline';
-import icomoon from '../assets/css/icomoon.css?inline';
 // TODO/sk: Purge it - postcss-purgecss
 import primeflex from 'primeflex/primeflex.css?inline';
 import appStyles from '../assets/css/style.scss?inline';
 import router from './router';
 
 const styles = [
-	icomoon,
 	roboto300,
 	roboto400,
 	roboto500,
diff --git a/packages/web-forms/src/index.ts b/packages/web-forms/src/index.ts
index 70fb328c..d072791d 100644
--- a/packages/web-forms/src/index.ts
+++ b/packages/web-forms/src/index.ts
@@ -6,7 +6,6 @@ import { POST_SUBMIT__NEW_INSTANCE } from './lib/constants/control-flow.ts';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
-import './assets/css/icomoon.css';
 // TODO/sk: Purge it - postcss-purgecss
 import 'primeflex/primeflex.css';
 import './assets/css/style.scss';
diff --git a/packages/web-forms/vite.config.ts b/packages/web-forms/vite.config.ts
index 112b5e5f..7bde71ad 100644
--- a/packages/web-forms/vite.config.ts
+++ b/packages/web-forms/vite.config.ts
@@ -108,8 +108,6 @@ export default defineConfig(({ mode }) => {
 				// With following lines, fonts byte array are copied into css file
 				// Roboto fonts
 				'./fonts': resolve('../../node_modules/@fontsource/roboto'),
-				// Icomoon fonts
-				'/fonts': resolve('./src/assets/fonts'),
 			},
 		},
 		build: {

From a32be7f2b144f32e05d41208ce7f2ff6310dadf5 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 24 Apr 2025 20:53:14 -0600
Subject: [PATCH 05/11] lint

---
 packages/web-forms/src/components/FormHeader.vue | 14 +++++++-------
 .../src/components/FormLanguageMenu.vue          |  4 ++--
 packages/web-forms/src/components/OdkWebForm.vue |  6 +++---
 .../Input/Geopoint/GeolocationRequestDialog.vue  |  8 ++++----
 .../controls/Input/Geopoint/InputGeopoint.vue    | 10 +++++-----
 .../src/components/controls/RankControl.vue      | 10 +++++-----
 .../controls/Upload/UploadImageControl.vue       |  6 +++---
 .../controls/Upload/UploadImagePreview.vue       |  4 ++--
 .../components/widgets/{Icon.vue => IconSVG.vue} |  6 +++---
 packages/web-forms/src/demo/DemoForm.vue         |  6 +++---
 packages/web-forms/src/demo/FormUpload.vue       | 16 ++++++++--------
 11 files changed, 45 insertions(+), 45 deletions(-)
 rename packages/web-forms/src/components/widgets/{Icon.vue => IconSVG.vue} (93%)

diff --git a/packages/web-forms/src/components/FormHeader.vue b/packages/web-forms/src/components/FormHeader.vue
index 854a2fbc..da06f861 100644
--- a/packages/web-forms/src/components/FormHeader.vue
+++ b/packages/web-forms/src/components/FormHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import {
 	type FormLanguage,
 	type RootNode,
@@ -52,7 +52,7 @@ const handleLanguageChange = (event: FormLanguage) => {
 	<div class="hidden lg:inline larger-screens">
 		<div class="flex justify-content-end flex-wrap gap-3">
 			<Button class="print-button" severity="secondary" rounded @click="print">
-				<Icon name="mdiPrinter" />
+				<IconSVG name="mdiPrinter" />
 			</Button>
 			<FormLanguageMenu
 				:active-language="form.currentState.activeLanguage"
@@ -79,18 +79,18 @@ const handleLanguageChange = (event: FormLanguage) => {
 		<div class="form-options">
 			<!-- if Form is not multilingual then we always show print button -->
 			<Button v-if="languages.length === 0" class="print-button" severity="secondary" rounded @click="print">
-				<Icon name="mdiPrinter" />
+				<IconSVG name="mdiPrinter" />
 			</Button>
 
 			<!-- show either hamburger or (print button and language changer) based on container size -->
 			<div v-else class="multilingual">
 				<Button class="btn-menu" text rounded aria-label="Menu" @click="menu?.toggle">
-					<Icon name="mdiMenu" />
+					<IconSVG name="mdiMenu" />
 				</Button>
 				<Menu id="overlay_menu" ref="menu" :model="items" :popup="true">
 					<template #item="{ item }">
-						<a class="p-menu-item-link" @click="item.command">
-							<Icon :name="item.icon" />
+						<a class="p-menu-item-link" v-if="item.command != null" @click="(event) => item.command?.({ originalEvent: event, item })">
+							<IconSVG v-if="item.icon != null" :name="item.icon" />
 							<span>{{ item.label }}</span>
 						</a>
 					</template>
@@ -103,7 +103,7 @@ const handleLanguageChange = (event: FormLanguage) => {
 				/>
 
 				<Button class="print-button" severity="secondary" rounded @click="print">
-					<Icon name="mdiPrinter" />
+					<IconSVG name="mdiPrinter" />
 				</Button>
 				<FormLanguageMenu
 					:active-language="form.currentState.activeLanguage"
diff --git a/packages/web-forms/src/components/FormLanguageMenu.vue b/packages/web-forms/src/components/FormLanguageMenu.vue
index 2e5c39dd..b1bda5f8 100644
--- a/packages/web-forms/src/components/FormLanguageMenu.vue
+++ b/packages/web-forms/src/components/FormLanguageMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import type { ActiveLanguage, FormLanguage } from '@getodk/xforms-engine';
 import Select from 'primevue/select';
 
@@ -19,7 +19,7 @@ defineEmits(['update:activeLanguage']);
 		@update:model-value="$emit('update:activeLanguage', $event)"
 	>
 		<template #value="slotProps">
-			<Icon name="mdiWeb" />
+			<IconSVG name="mdiWeb" />
 			<span>
 				{{ slotProps.value.language }}
 			</span>
diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index d07009e1..58fac84f 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import type { FormStateSuccessResult } from '@/lib/init/FormState.ts';
 import { initializeFormState } from '@/lib/init/initializeFormState.ts';
 import type { EditInstanceOptions } from '@/lib/init/loadFormState';
@@ -220,10 +220,10 @@ watchEffect(() => {
 		:class="{ 'submit-pressed': submitPressed }"
 	>
 		<div class="form-wrapper">
-			<div v-if="showValidationError" class="error-banner-placeholder"></div>
+			<div v-if="showValidationError" class="error-banner-placeholder" />
 			<!-- Closable error message to clear the view and avoid overlap with other elements -->
 			<Message v-if="showValidationError" severity="error" class="form-error-message" :closable="true" @close="floatingErrorActive = false">
-				<Icon name="mdiAlertCircleOutline" variant="error" />
+				<IconSVG name="mdiAlertCircleOutline" variant="error" />
 				<span>{{ validationErrorMessage }}</span>
 			</Message>
 
diff --git a/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue b/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
index bf77965d..44896464 100644
--- a/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
+++ b/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import { computed, onBeforeUnmount, ref, watchEffect } from 'vue';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
@@ -128,7 +128,7 @@ onBeforeUnmount(cleanup);
 					<strong>Finding your location</strong>
 				</div>
 				<button class="close-icon" @click="cancel()">
-					<Icon name="mdiClose" />
+					<IconSVG name="mdiClose" />
 				</button>
 			</div>
 		</template>
@@ -136,8 +136,8 @@ onBeforeUnmount(cleanup);
 		<template #default>
 			<div class="geo-dialog-body">
 				<div v-if="accuracy.value != null" class="geopoint-icons">
-					<Icon v-if="accuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
-					<Icon v-else name="mdiCheck" variant="primary" />
+					<IconSVG v-if="accuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
+					<IconSVG v-else name="mdiCheck" variant="primary" />
 				</div>
 
 				<div class="geopoint-information">
diff --git a/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue b/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
index 8a4e0f4b..c3a0d2a1 100644
--- a/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
+++ b/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import { computed, inject, ref } from 'vue';
 import Button from 'primevue/button';
 import type { GeopointInputNode } from '@getodk/xforms-engine';
@@ -123,15 +123,15 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 			:disabled="isDisabled"
 			@click="initiateRequest()"
 		>
-			<Icon name="mdiMapMarkerOutline" variant="inverted" />
+			<IconSVG name="mdiMapMarkerOutline" variant="inverted" />
 			<!-- TODO: translations -->
 			<span>Get location</span>
 		</Button>
 
 		<div v-if="committedValue != null" class="geopoint-value-container">
 			<div class="geopoint-icons">
-				<Icon v-if="committedValueAccuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
-				<Icon v-else name="mdiCheck" variant="primary" />
+				<IconSVG v-if="committedValueAccuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
+				<IconSVG v-else name="mdiCheck" variant="primary" />
 			</div>
 			<div class="geopoint-value">
 				<strong class="geo-quality">{{ committedValueAccuracy.label }}</strong>
@@ -143,7 +143,7 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 					class="retry-button"
 					@click="initiateRequest()"
 				>
-					<Icon name="mdiRefresh" />
+					<IconSVG name="mdiRefresh" />
 					<!-- TODO: translations -->
 					<span>Try again</span>
 				</Button>
diff --git a/packages/web-forms/src/components/controls/RankControl.vue b/packages/web-forms/src/components/controls/RankControl.vue
index a29148ea..d9911aa5 100644
--- a/packages/web-forms/src/components/controls/RankControl.vue
+++ b/packages/web-forms/src/components/controls/RankControl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ControlText from '@/components/ControlText.vue';
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import ValidationMessage from '@/components/ValidationMessage.vue';
 import type { TimerID } from '@getodk/common/types/timers.ts';
 import type { RankNode } from '@getodk/xforms-engine';
@@ -111,7 +111,7 @@ const swapItems = (index: number, newPosition: number) => {
 	<div class="rank-control-container">
 		<div v-if="!touched" class="rank-overlay">
 			<button :disabled="disabled" @click="selectDefaultOrder">
-				<Icon name="mdiUnfoldMoreHorizontal" size="sm" :variant="disabled ? 'muted' : null" />
+				<IconSVG name="mdiUnfoldMoreHorizontal" size="sm" :variant="disabled ? 'muted' : 'base'" />
 				<!-- TODO: translations -->
 				<span>Rank items</span>
 			</button>
@@ -138,7 +138,7 @@ const swapItems = (index: number, newPosition: number) => {
 				@keydown.down.prevent="moveDown(index)"
 			>
 				<div class="rank-label">
-					<Icon name="mdiDragVertical" />
+					<IconSVG name="mdiDragVertical" />
 					<span>{{ props.question.getValueLabel(value)?.asString }}</span>
 				</div>
 
@@ -149,7 +149,7 @@ const swapItems = (index: number, newPosition: number) => {
 						@click="moveUp(index)"
 						@mousedown="setHighlight(index)"
 					>
-						<Icon name="mdiChevronUp" size="sm" :variant="disabled || index === 0 ? 'muted' : null" />
+						<IconSVG name="mdiChevronUp" size="sm" :variant="disabled || index === 0 ? 'muted' : 'base'" />
 					</button>
 
 					<button
@@ -158,7 +158,7 @@ const swapItems = (index: number, newPosition: number) => {
 						@click="moveDown(index)"
 						@mousedown="setHighlight(index)"
 					>
-						<Icon name="mdiChevronDown" size="sm" :variant="disabled || index === values.length - 1 ? 'muted' : null" />
+						<IconSVG name="mdiChevronDown" size="sm" :variant="disabled || index === values.length - 1 ? 'muted' : 'base'" />
 					</button>
 				</div>
 			</div>
diff --git a/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue b/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue
index 30aa23ec..e3809ba7 100644
--- a/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue
+++ b/packages/web-forms/src/components/controls/Upload/UploadImageControl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ControlText from '@/components/ControlText.vue';
 import ValidationMessage from '@/components/ValidationMessage.vue';
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import type { UploadNode } from '@getodk/xforms-engine';
 import Button from 'primevue/button';
 import type { HTMLInputElementEvent, Ref } from 'vue';
@@ -76,7 +76,7 @@ watchEffect(() => {
 				:disabled="isDisabled"
 				@click="triggerInputField(takePictureInput)"
 			>
-				<Icon name="mdiCamera" variant="inverted" />
+				<IconSVG name="mdiCamera" variant="inverted" />
 				<!-- TODO: translations -->
 				<span>Take picture</span>
 			</Button>
@@ -96,7 +96,7 @@ watchEffect(() => {
 			:disabled="isDisabled"
 			@click="triggerInputField(selectImageInput)"
 		>
-			<Icon name="mdiImage" variant="inverted" />
+			<IconSVG name="mdiImage" variant="inverted" />
 			<!-- TODO: Good candidate for <slot> in a general component -->
 			<!-- TODO: translations -->
 			<span>Choose image</span>
diff --git a/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue b/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue
index 0d6fa3ed..bb4548ba 100644
--- a/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue
+++ b/packages/web-forms/src/components/controls/Upload/UploadImagePreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import type { ObjectURL } from '@getodk/common/lib/web-compat/url.ts';
 import { createObjectURL, revokeObjectURL } from '@getodk/common/lib/web-compat/url.ts';
 import type { UploadNode } from '@getodk/xforms-engine';
@@ -77,7 +77,7 @@ watchEffect(() => {
 <template>
 	<div v-if="imageURL" class="preview-captured-image" :class="{ 'small-image': isSmallImage }">
 		<Button v-if="!isDisabled" severity="secondary" outlined class="clear-button" @click="emit('clear')">
-			<Icon name="mdiClose" variant="muted" size="sm" />
+			<IconSVG name="mdiClose" variant="muted" size="sm" />
 		</Button>
 		<img :src="imageURL" alt="Captured image preview" @load="onPreviewLoad">
 	</div>
diff --git a/packages/web-forms/src/components/widgets/Icon.vue b/packages/web-forms/src/components/widgets/IconSVG.vue
similarity index 93%
rename from packages/web-forms/src/components/widgets/Icon.vue
rename to packages/web-forms/src/components/widgets/IconSVG.vue
index 82b2c76f..e793a17f 100644
--- a/packages/web-forms/src/components/widgets/Icon.vue
+++ b/packages/web-forms/src/components/widgets/IconSVG.vue
@@ -46,8 +46,8 @@ const iconMap: Record<string, string> = {
 };
 
 type IconName = keyof typeof iconMap;
-type IconVariant = 'base' | 'primary' | 'inverted' | 'muted' | 'error' | 'warning';
-type IconSize = 'sm' | 'md';
+type IconVariant = 'base' | 'error' | 'inverted' | 'muted' | 'primary' | 'warning';
+type IconSize = 'md' | 'sm';
 
 /**
  * Defines the icon's display and appearance.
@@ -114,7 +114,7 @@ const iconSize = computed(() => props.size ?? 'md');
 	width: 14px;
 
 	path {
-		transform: scale(0.8) translate(-4px, -4px);;
+		transform: scale(0.8) translate(-4px, -4px);
 	}
 }
 
diff --git a/packages/web-forms/src/demo/DemoForm.vue b/packages/web-forms/src/demo/DemoForm.vue
index 521ed0f1..f73f718f 100644
--- a/packages/web-forms/src/demo/DemoForm.vue
+++ b/packages/web-forms/src/demo/DemoForm.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import { xformFixturesByIdentifier } from '@getodk/common/fixtures/xforms';
 import { xlsFormUrlMap } from '@getodk/common/fixtures/xlsforms';
 import Button from 'primevue/button';
@@ -47,13 +47,13 @@ const formXls = computed(() => {
 			<div class="actions">
 				<RouterLink :to="`/form?url=${formXml}`" target="_blank" class="form-preview-link">
 					<Button class="preview-button">
-						<Icon name="mdiEye" variant="inverted" />
+						<IconSVG name="mdiEye" variant="inverted" />
 						<span>View Form</span>
 					</Button>
 				</RouterLink>
 				<a :href="formXls">
 					<Button class="download-button" severity="contrast" variant="outlined">
-						<Icon name="mdiDownload" />
+						<IconSVG name="mdiDownload" />
 						<span>Download</span>
 					</Button>
 				</a>
diff --git a/packages/web-forms/src/demo/FormUpload.vue b/packages/web-forms/src/demo/FormUpload.vue
index d6256a66..d4753acf 100644
--- a/packages/web-forms/src/demo/FormUpload.vue
+++ b/packages/web-forms/src/demo/FormUpload.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Icon from '@/components/widgets/Icon.vue';
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import Button from 'primevue/button';
 import ProgressSpinner from 'primevue/progressspinner';
 import { RouterLink } from 'vue-router';
@@ -149,7 +149,7 @@ document.addEventListener(
 				<template	v-if="!formUploading">
 					<input ref="fileInput" type="file" hidden accept=".xls, .xlsx, .xml" @change="fileChangeHandler">
 					<span>
-						<Icon name="mdiFileDocumentOutline" variant="muted" />
+						<IconSVG name="mdiFileDocumentOutline" variant="muted" />
 						Drag and drop XLSForm or <a href="javascript:;" class="upload-file-link" @click="fileInput.click()">upload form</a>
 					</span>
 					<template v-if="inDevMode">
@@ -168,19 +168,19 @@ document.addEventListener(
 
 		<div v-else class="preview-wrapper">
 			<div class="textbox-with-icon">
-				<Icon name="mdiFileDocumentOutline" class="doc-input-icon" variant="muted" />
+				<IconSVG name="mdiFileDocumentOutline" class="doc-input-icon" variant="muted" />
 				<InputText :value="uploadedFilename" class="uploaded-file-textbox" />
-				<Icon name="mdiClose" class="reset-action" aria-label="Cancel" @click="reset()" />
+				<IconSVG name="mdiClose" class="reset-action" aria-label="Cancel" @click="reset()" />
 			</div>
 
 			<div class="action-buttons">
 				<Button class="upload-new-button" severity="contrast" variant="outlined" @click="reset">
-					<Icon name="mdiUpload" />
+					<IconSVG name="mdiUpload" />
 					<span>Upload new Form</span>
 				</Button>
 				<RouterLink :to="`/form?url=${xformUrl}`" target="_blank" class="preview-link">
 					<Button class="preview-link-button">
-						<Icon name="mdiEye" variant="inverted" />
+						<IconSVG name="mdiEye" variant="inverted" />
 						<span>Preview Form</span>
 					</Button>
 				</RouterLink>
@@ -191,7 +191,7 @@ document.addEventListener(
 			{{ error }}
 		</Message>
 		<Message v-if="warnings?.length > 0" severity="warn">
-			<Icon name="mdiAlert" variant="warning" />
+			<IconSVG name="mdiAlert" variant="warning" />
 			<span>There are following possible problems in the uploaded Form:</span>
 			<ul>
 				<li v-for="warning in warnings" :key="warning">
@@ -300,7 +300,7 @@ document.addEventListener(
 	}
 
 	:deep(.p-message .p-message-content .odk-icon) {
-			margin-right: 10px;
+		margin-right: 10px;
 	}
 
 	:deep(.p-button) {

From 93b710bfb63f5cd4d6e70fa9c1670592e84ea398 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 24 Apr 2025 20:56:23 -0600
Subject: [PATCH 06/11] changeset

---
 .changeset/green-mirrors-teach.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/green-mirrors-teach.md

diff --git a/.changeset/green-mirrors-teach.md b/.changeset/green-mirrors-teach.md
new file mode 100644
index 00000000..6da6e8cd
--- /dev/null
+++ b/.changeset/green-mirrors-teach.md
@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': patch
+---
+
+Adds icon component with Material Design Icons to replace Icomoon

From ed24522af190f0bb4efcda78331e3cd1dd9d90d9 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 24 Apr 2025 21:06:33 -0600
Subject: [PATCH 07/11] Typos

---
 .changeset/green-mirrors-teach.md | 2 +-
 packages/web-forms/README.md      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/green-mirrors-teach.md b/.changeset/green-mirrors-teach.md
index 6da6e8cd..33c8f58d 100644
--- a/.changeset/green-mirrors-teach.md
+++ b/.changeset/green-mirrors-teach.md
@@ -2,4 +2,4 @@
 '@getodk/web-forms': patch
 ---
 
-Adds icon component with Material Design Icons to replace Icomoon
+Adds icon component with Material Design icons to replace Icomoon
diff --git a/packages/web-forms/README.md b/packages/web-forms/README.md
index 6ceba33b..561a87d3 100644
--- a/packages/web-forms/README.md
+++ b/packages/web-forms/README.md
@@ -109,7 +109,7 @@ This package uses the Material Design system for the UI, though not strictly. Th
 The `Icon` component renders Material Design Icons (MDI) with customizable size and style variants. It uses the `@mdi/js` library for icon data and supports a predefined set of icons.
 
 ```js
-<Icon name="mdiCamera" size="md" variant="primary" />
+<IconSVG name="mdiCamera" size="md" variant="primary" />
 ```
 
 To add a new icon:

From 2d5a9e9cd321d1ab2ee72de09c303389af43fccc Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 28 Apr 2025 10:31:47 -0600
Subject: [PATCH 08/11] Feedback

---
 packages/web-forms/README.md                     | 4 ++--
 packages/web-forms/src/components/FormHeader.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-forms/README.md b/packages/web-forms/README.md
index 561a87d3..56ea8706 100644
--- a/packages/web-forms/README.md
+++ b/packages/web-forms/README.md
@@ -106,7 +106,7 @@ This package uses the Material Design system for the UI, though not strictly. Th
 
 ### Icons
 
-The `Icon` component renders Material Design Icons (MDI) with customizable size and style variants. It uses the `@mdi/js` library for icon data and supports a predefined set of icons.
+The `IconSVG` component renders Material Design Icons (MDI) with customizable size and style variants. It uses the `@mdi/js` library for icon data and supports a predefined set of icons.
 
 ```js
 <IconSVG name="mdiCamera" size="md" variant="primary" />
@@ -114,7 +114,7 @@ The `Icon` component renders Material Design Icons (MDI) with customizable size
 
 To add a new icon:
 
-- Import the icon from `@mdi/js` in the `Icon` component.
+- Import the icon from `@mdi/js` in the `IconSVG` component.
 - Add the icon to the `iconMap` object with its corresponding name.
 - Use the icon by passing its name to the `name` prop.
 
diff --git a/packages/web-forms/src/components/FormHeader.vue b/packages/web-forms/src/components/FormHeader.vue
index da06f861..4b3b9c01 100644
--- a/packages/web-forms/src/components/FormHeader.vue
+++ b/packages/web-forms/src/components/FormHeader.vue
@@ -89,7 +89,7 @@ const handleLanguageChange = (event: FormLanguage) => {
 				</Button>
 				<Menu id="overlay_menu" ref="menu" :model="items" :popup="true">
 					<template #item="{ item }">
-						<a class="p-menu-item-link" v-if="item.command != null" @click="(event) => item.command?.({ originalEvent: event, item })">
+						<a v-if="item.command != null" class="p-menu-item-link" @click="(event) => item.command && item.command({ originalEvent: event, item })">
 							<IconSVG v-if="item.icon != null" :name="item.icon" />
 							<span>{{ item.label }}</span>
 						</a>

From 14bb968542a21fcaf9040492f1028f532a042bce Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 28 Apr 2025 13:01:49 -0600
Subject: [PATCH 09/11] Icon sizes to 20px

---
 packages/web-forms/src/assets/css/style.scss  |  4 +++
 .../web-forms/src/components/FormHeader.vue   |  8 ++---
 .../src/components/FormLanguageMenu.vue       |  4 +--
 .../Geopoint/GeolocationRequestDialog.vue     | 12 ++++++--
 .../controls/Input/Geopoint/InputGeopoint.vue | 12 ++++++--
 .../components/controls/Input/InputDate.vue   |  9 ++++++
 .../src/components/controls/RankControl.vue   |  3 +-
 .../src/components/widgets/IconSVG.vue        | 16 ++++++----
 packages/web-forms/src/demo/DemoForm.vue      | 10 ++++++-
 packages/web-forms/src/demo/FormUpload.vue    | 29 ++++++++++++++-----
 10 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/packages/web-forms/src/assets/css/style.scss b/packages/web-forms/src/assets/css/style.scss
index 92a71a56..c11b6e56 100644
--- a/packages/web-forms/src/assets/css/style.scss
+++ b/packages/web-forms/src/assets/css/style.scss
@@ -78,3 +78,7 @@ body {
 	font-weight: 400;
 	font-size: var(--odk-base-font-size);
 }
+
+button.p-button {
+	min-height: 40px;
+}
diff --git a/packages/web-forms/src/components/FormHeader.vue b/packages/web-forms/src/components/FormHeader.vue
index 4b3b9c01..e6c05e9c 100644
--- a/packages/web-forms/src/components/FormHeader.vue
+++ b/packages/web-forms/src/components/FormHeader.vue
@@ -172,8 +172,8 @@ const handleLanguageChange = (event: FormLanguage) => {
 			justify-content: end;
 			gap: 0.5rem;
 
-			.btn-menu {
-				color: var(--odk-text-color);
+			.btn-menu :deep(.odk-icon) path {
+				transform: scale(1.1) translate(-3px, -3px);
 			}
 
 			.print-button {
@@ -202,9 +202,5 @@ const handleLanguageChange = (event: FormLanguage) => {
 			}
 		}
 	}
-
-	.btn-menu {
-		color: var(--odk-text-color);
-	}
 }
 </style>
diff --git a/packages/web-forms/src/components/FormLanguageMenu.vue b/packages/web-forms/src/components/FormLanguageMenu.vue
index b1bda5f8..de6f6b59 100644
--- a/packages/web-forms/src/components/FormLanguageMenu.vue
+++ b/packages/web-forms/src/components/FormLanguageMenu.vue
@@ -46,14 +46,14 @@ defineEmits(['update:activeLanguage']);
 	}
 
 	:deep(.p-select-label) {
-		padding: 5px 16px;
+		padding: 5px 12px;
 		span {
 			vertical-align: middle;
 		}
 	}
 
 	.odk-icon {
-		margin-right: 10px;
+		margin-right: 0.5rem;;
 	}
 }
 </style>
diff --git a/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue b/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
index 44896464..b97db97b 100644
--- a/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
+++ b/packages/web-forms/src/components/controls/Input/Geopoint/GeolocationRequestDialog.vue
@@ -136,8 +136,8 @@ onBeforeUnmount(cleanup);
 		<template #default>
 			<div class="geo-dialog-body">
 				<div v-if="accuracy.value != null" class="geopoint-icons">
-					<IconSVG v-if="accuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
-					<IconSVG v-else name="mdiCheck" variant="primary" />
+					<IconSVG v-if="accuracy.quality === GeopointAccuracy.POOR" class="warning-icon" name="mdiAlert" variant="error" />
+					<IconSVG v-else class="check-icon" name="mdiCheck" variant="primary" />
 				</div>
 
 				<div class="geopoint-information">
@@ -211,6 +211,14 @@ onBeforeUnmount(cleanup);
 	.geopoint-icons {
 		margin-top: -4px;
 		margin-right: var(--geo-spacing-l);
+
+		.warning-icon path {
+			transform: scale(0.91) translate(-1px, -1px);
+		}
+
+		.check-icon path {
+			transform: scale(1.14) translate(-3px, -3px);
+		}
 	}
 }
 
diff --git a/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue b/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
index c3a0d2a1..7bd2fcbf 100644
--- a/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
+++ b/packages/web-forms/src/components/controls/Input/Geopoint/InputGeopoint.vue
@@ -130,8 +130,8 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 
 		<div v-if="committedValue != null" class="geopoint-value-container">
 			<div class="geopoint-icons">
-				<IconSVG v-if="committedValueAccuracy.quality === GeopointAccuracy.POOR" name="mdiAlert" variant="error" />
-				<IconSVG v-else name="mdiCheck" variant="primary" />
+				<IconSVG v-if="committedValueAccuracy.quality === GeopointAccuracy.POOR" class="warning-icon" name="mdiAlert" variant="error" />
+				<IconSVG v-else class="check-icon" name="mdiCheck" variant="primary" />
 			</div>
 			<div class="geopoint-value">
 				<strong class="geo-quality">{{ committedValueAccuracy.label }}</strong>
@@ -207,6 +207,14 @@ const onSave = (saved: GeolocationRequestSuccess) => {
 		flex-wrap: wrap;
 		flex-grow: 2;
 	}
+
+	:deep(.odk-icon.warning-icon) path {
+		transform: scale(0.91) translate(-1px, -1px);
+	}
+
+	:deep(.odk-icon.check-icon) path {
+		transform: scale(1.14) translate(-3px, -3px);
+	}
 }
 
 .geopoint-error {
diff --git a/packages/web-forms/src/components/controls/Input/InputDate.vue b/packages/web-forms/src/components/controls/Input/InputDate.vue
index 5318091f..8f629884 100644
--- a/packages/web-forms/src/components/controls/Input/InputDate.vue
+++ b/packages/web-forms/src/components/controls/Input/InputDate.vue
@@ -46,4 +46,13 @@ const isDisabled = computed(() => props.question.currentState.readonly === true)
 .p-datepicker-input:disabled + .p-datepicker-input-icon-container {
 	cursor: not-allowed;
 }
+
+.p-datepicker .p-datepicker-input-icon-container {
+	top: 19px;
+
+	svg {
+		width: 20px;
+		height: 20px;
+	}
+}
 </style>
diff --git a/packages/web-forms/src/components/controls/RankControl.vue b/packages/web-forms/src/components/controls/RankControl.vue
index d9911aa5..c1cf3f1f 100644
--- a/packages/web-forms/src/components/controls/RankControl.vue
+++ b/packages/web-forms/src/components/controls/RankControl.vue
@@ -266,6 +266,7 @@ const swapItems = (index: number, newPosition: number) => {
 	position: absolute;
 	width: 100%;
 	height: 100%;
+	min-height: 50px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -273,7 +274,7 @@ const swapItems = (index: number, newPosition: number) => {
 	border-radius: var(--odk-radius);
 
 	button {
-		padding: 10px 20px;
+		padding: 12px 20px;
 		font-size: var(--odk-base-font-size);
 
 		&:hover:not(:disabled) {
diff --git a/packages/web-forms/src/components/widgets/IconSVG.vue b/packages/web-forms/src/components/widgets/IconSVG.vue
index e793a17f..60a9bfb1 100644
--- a/packages/web-forms/src/components/widgets/IconSVG.vue
+++ b/packages/web-forms/src/components/widgets/IconSVG.vue
@@ -10,8 +10,8 @@ import {
 	mdiClose,
 	mdiDownload,
 	mdiDragVertical,
-	mdiEye,
-	mdiFileDocumentOutline,
+	mdiEyeOutline,
+	mdiFileOutline,
 	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
@@ -33,8 +33,8 @@ const iconMap: Record<string, string> = {
 	mdiClose,
 	mdiDownload,
 	mdiDragVertical,
-	mdiEye,
-	mdiFileDocumentOutline,
+	mdiEyeOutline,
+	mdiFileOutline,
 	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
@@ -119,7 +119,11 @@ const iconSize = computed(() => props.size ?? 'md');
 }
 
 .odk-icon.odk-icon-md {
-	height: 24px;
-	width: 24px;
+	height: 20px;
+	width: 20px;
+
+	path {
+		transform: translate(-2px, -2px);
+	}
 }
 </style>
diff --git a/packages/web-forms/src/demo/DemoForm.vue b/packages/web-forms/src/demo/DemoForm.vue
index f73f718f..45187846 100644
--- a/packages/web-forms/src/demo/DemoForm.vue
+++ b/packages/web-forms/src/demo/DemoForm.vue
@@ -47,7 +47,7 @@ const formXls = computed(() => {
 			<div class="actions">
 				<RouterLink :to="`/form?url=${formXml}`" target="_blank" class="form-preview-link">
 					<Button class="preview-button">
-						<IconSVG name="mdiEye" variant="inverted" />
+						<IconSVG name="mdiEyeOutline" variant="inverted" />
 						<span>View Form</span>
 					</Button>
 				</RouterLink>
@@ -102,5 +102,13 @@ const formXls = computed(() => {
 		flex-direction: row;
 		gap: 1rem;
 	}
+
+	.preview-button :deep(.odk-icon) path {
+		transform: scale(0.91);
+	}
+
+	.download-button :deep(.odk-icon) path {
+		transform: scale(1.17) translate(-3px, -3px);
+	}
 }
 </style>
diff --git a/packages/web-forms/src/demo/FormUpload.vue b/packages/web-forms/src/demo/FormUpload.vue
index d4753acf..23522bc4 100644
--- a/packages/web-forms/src/demo/FormUpload.vue
+++ b/packages/web-forms/src/demo/FormUpload.vue
@@ -149,7 +149,7 @@ document.addEventListener(
 				<template	v-if="!formUploading">
 					<input ref="fileInput" type="file" hidden accept=".xls, .xlsx, .xml" @change="fileChangeHandler">
 					<span>
-						<IconSVG name="mdiFileDocumentOutline" variant="muted" />
+						<IconSVG name="mdiFileOutline" variant="muted" />
 						Drag and drop XLSForm or <a href="javascript:;" class="upload-file-link" @click="fileInput.click()">upload form</a>
 					</span>
 					<template v-if="inDevMode">
@@ -168,7 +168,7 @@ document.addEventListener(
 
 		<div v-else class="preview-wrapper">
 			<div class="textbox-with-icon">
-				<IconSVG name="mdiFileDocumentOutline" class="doc-input-icon" variant="muted" />
+				<IconSVG name="mdiFileOutline" class="doc-input-icon" />
 				<InputText :value="uploadedFilename" class="uploaded-file-textbox" />
 				<IconSVG name="mdiClose" class="reset-action" aria-label="Cancel" @click="reset()" />
 			</div>
@@ -180,7 +180,7 @@ document.addEventListener(
 				</Button>
 				<RouterLink :to="`/form?url=${xformUrl}`" target="_blank" class="preview-link">
 					<Button class="preview-link-button">
-						<IconSVG name="mdiEye" variant="inverted" />
+						<IconSVG name="mdiEyeOutline" variant="inverted" />
 						<span>Preview Form</span>
 					</Button>
 				</RouterLink>
@@ -228,7 +228,7 @@ document.addEventListener(
 		font-weight: 300;
 
 		.odk-icon {
-			vertical-align: bottom;
+			margin-top: -4px;
 		}
 	}
 
@@ -259,14 +259,14 @@ document.addEventListener(
 
 			.odk-icon.doc-input-icon {
 				position: absolute;
-				top: 9px;
-				left: 8px;
+				top: 12px;
+				left: 10px;
 			}
 
 			.odk-icon.reset-action {
 				position: absolute;
-				top: 11px;
-				right: 7px;
+				top: 13px;
+				right: 9px;
 				cursor: pointer;
 			}
 		}
@@ -301,6 +301,11 @@ document.addEventListener(
 
 	:deep(.p-message .p-message-content .odk-icon) {
 		margin-right: 10px;
+		margin-top: -3px;
+
+		path {
+			transform: scale(0.91);
+		}
 	}
 
 	:deep(.p-button) {
@@ -308,5 +313,13 @@ document.addEventListener(
 			text-align: left;
 		}
 	}
+
+	.preview-link-button :deep(.odk-icon) path {
+		transform: scale(0.91);
+	}
+
+	.upload-new-button :deep(.odk-icon) path {
+		transform: scale(1.17) translate(-3px, -3px);
+	}
 }
 </style>

From 6437e99df9fd751c0379022788aa82653aabb561 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 28 Apr 2025 13:06:49 -0600
Subject: [PATCH 10/11] Icons for group and repeat

---
 packages/web-forms/src/components/FormPanel.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/FormPanel.vue b/packages/web-forms/src/components/FormPanel.vue
index 709b72a6..ba04d082 100644
--- a/packages/web-forms/src/components/FormPanel.vue
+++ b/packages/web-forms/src/components/FormPanel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import IconSVG from '@/components/widgets/IconSVG.vue';
 import Button from 'primevue/button';
 import Menu, { type MenuState } from 'primevue/menu';
 import { type MenuItem } from 'primevue/menuitem';
@@ -45,7 +46,8 @@ const toggleMenu = (event: Event) => {
 		<template #header>
 			<div class="panel-title" role="button" @click="toggle">
 				<h2>
-					<span class="chevron" :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" />
+					<IconSVG v-if="panelState" name="mdiChevronDown" />
+					<IconSVG v-if="!panelState" name="mdiChevronUp" />
 					<span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
 					<span>{{ title }}</span>
 					<span v-if="labelIcon" class="ml-2" :class="labelIcon" />

From 83df5cd920cab03515303878e23948ba00cfa0e4 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 28 Apr 2025 13:09:47 -0600
Subject: [PATCH 11/11] Fixes lint

---
 packages/web-forms/src/components/FormLanguageMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/FormLanguageMenu.vue b/packages/web-forms/src/components/FormLanguageMenu.vue
index de6f6b59..2e2a0ab3 100644
--- a/packages/web-forms/src/components/FormLanguageMenu.vue
+++ b/packages/web-forms/src/components/FormLanguageMenu.vue
@@ -53,7 +53,7 @@ defineEmits(['update:activeLanguage']);
 	}
 
 	.odk-icon {
-		margin-right: 0.5rem;;
+		margin-right: 0.5rem;
 	}
 }
 </style>