support browser icons

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import SortDropdown from "./components/SortDropdown.vue";
+import { browserIconOptions, browserIconSrc } from "./features/browser-assistant/icons";
 import { useBrowserAssistant } from "./features/browser-assistant/useBrowserAssistant";
 
 const {
@@ -61,7 +62,14 @@ const {
           type="button"
           @click="selectedBrowserId = browser.browserId; page = 'browserData'"
         >
-          <div class="browser-nav-icon">{{ browserMonogram(browser.browserId) }}</div>
+          <div class="browser-nav-icon">
+            <img
+              v-if="browserIconSrc(browser.iconKey ?? browser.browserFamilyId)"
+              :src="browserIconSrc(browser.iconKey ?? browser.browserFamilyId) ?? undefined"
+              :alt="`${browser.browserName} icon`"
+            />
+            <span v-else>{{ browserMonogram(browser.browserId) }}</span>
+          </div>
           <div class="browser-nav-body">
             <strong>{{ browser.browserName }}</strong>
             <span>{{ browser.dataRoot }}</span>
@@ -109,6 +117,22 @@ const {
                   <span>Name</span>
                   <input v-model="createConfigForm.name" placeholder="Work Chrome" />
                 </label>
+                <label class="field-group">
+                  <span>Icon</span>
+                  <div class="icon-option-grid">
+                    <button
+                      v-for="option in browserIconOptions"
+                      :key="option.key"
+                      class="icon-option-button"
+                      :class="{ active: createConfigForm.iconKey === option.key }"
+                      type="button"
+                      @click="createConfigForm.iconKey = option.key"
+                    >
+                      <img :src="option.src" :alt="option.label" />
+                      <span>{{ option.label }}</span>
+                    </button>
+                  </div>
+                </label>
                 <label class="field-group">
                   <span>Executable Path</span>
                   <div class="path-input-row">
@@ -166,7 +190,12 @@ const {
                 <div class="config-card-header">
                   <div class="config-card-lead">
                     <div class="browser-nav-icon config-icon">
-                      {{ configMonogram(config) }}
+                      <img
+                        v-if="browserIconSrc(config.iconKey ?? config.browserFamilyId)"
+                        :src="browserIconSrc(config.iconKey ?? config.browserFamilyId) ?? undefined"
+                        :alt="`${config.name} icon`"
+                      />
+                      <span v-else>{{ configMonogram(config) }}</span>
                     </div>
                     <div>
                       <div class="config-title-row">
@@ -175,7 +204,6 @@ const {
                           {{ config.source === "default" ? "Default" : "Custom" }}
                         </span>
                       </div>
-                      <p class="config-id">{{ config.id }}</p>
                     </div>
                   </div>
                   <button