docs(icon-fonts): update page content and structure

also added a link from learn menu to mdi icon search

Author: johnleider

packages/docs/src/components/app/bar/LearnMenu.vue

@@ -47,6 +47,11 @@
       to: rpath('/introduction/why-vuetify/#feature-guides'),
       appendIcon: 'mdi-lightbulb-on-outline',
     },
+    {
+      title: t('icons'),
+      to: rpath('/features/icon-fonts/#mdi-icons-search'),
+      appendIcon: 'mdi-emoticon-outline',
+    },
     {
       title: t('labs'),
       to: rpath('/labs/introduction/'),

packages/docs/src/components/doc/IconList.vue

@@ -3,18 +3,20 @@
     v-model="selection"
     v-model:search="search"
     :items="filteredIcons"
+    :item-props="itemProps"
+    :placeholder="t('search.icons')"
     item-title="name"
     item-value="name"
-    placeholder="Search for icons (e.g. account, close)"
-    :item-props="itemProps"
     no-filter
+    variant="outlined"
   >
     <template #prepend-inner>
       <v-expand-x-transition>
-        <v-icon v-if="selection" color="primary" start>
+        <v-icon v-if="selection" start>
           {{ getIcon(selection) }}
         </v-icon>
       </v-expand-x-transition>
+
       <code class="me-n1">mdi-</code>
     </template>
 
@@ -23,9 +25,9 @@
         <template #append>
           <v-btn
             icon="mdi-content-copy"
-            variant="plain"
             size="small"
-            @click="copy(item.raw.name)"
+            variant="plain"
+            @click.stop="copy(item.raw.name)"
           />
         </template>
       </v-list-item>
@@ -34,22 +36,30 @@
     <template #append-inner>
       <v-expand-x-transition>
         <span v-if="copied" class="text-primary pt-1">
-          Copied
+          {{ t('copied') }}
         </span>
       </v-expand-x-transition>
     </template>
   </v-autocomplete>
 </template>
 
 <script setup>
+  // Composables
+  import { useI18n } from 'vue-i18n'
+
+  // Utilities
+  import { camelize, computed, shallowRef, watch } from 'vue'
+  import { distance } from '@/util/helpers'
+
+  // Data
   import icons from '@mdi/svg/meta.json'
   import * as paths from '@mdi/js'
-  import { distance } from '@/util/helpers'
-  import { camelize, computed, ref, watch } from 'vue'
 
-  const copied = ref(false)
-  const selection = ref()
-  const search = ref('')
+  const { t } = useI18n()
+
+  const copied = shallowRef(false)
+  const selection = shallowRef()
+  const search = shallowRef('')
   const filteredIcons = computed(() => {
     if (!search.value) return icons
 

packages/docs/src/i18n/messages/en.json

@@ -168,6 +168,7 @@
   "hide-source": "Hide source",
   "homepage": "Vuetify Home Page",
   "icon": "Icon",
+  "icons": "Icons",
   "images-and-icons": "Images & icons",
   "inline": "Inline",
   "introduction": "Introduction",
@@ -255,6 +256,7 @@
   "scroll-to-top": "Scroll to top",
   "sass-variables": "SASS Variables",
   "search": {
+    "icons": "Search for icons (e.g. account, close)",
     "label": "Search",
     "looking": "Looking for",
     "key-hint": "Ctrl+K",