docs(getting-started): update

docs/content/1.getting-started/5.icons.md

@@ -1,38 +1,54 @@
 ---
-description: ''
+description: 'Nuxt UI integrates seamlessly with `@nuxt/icon`, providing access to over 200,000+ icons from [Iconify](https://iconify.design/).'
 links:
   - label: 'nuxt/icon'
     to: https://github.com/nuxt/icon
     target: _blank
     icon: i-simple-icons-github
-navigation:
-  badge:
-    label: Todo
 ---
 
-Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), add 200,000+ ready to use icons to your Nuxt application based on [Iconify](https://iconify.design).
+## Usage
 
-You can use any name from the https://icones.js.org collection such as the `i-` prefix (for example, `i-heroicons-cog`) with:
+Nuxt UI automatically registers the `@nuxt/icon` module for you, so there's no additional setup required.
 
-- any `icon` prop available across the components:
+::note
+You can use any name from the https://icones.js.org collection.
+::
 
-```vue
-<template>
-  <UButton icon="i-heroicons-magnifying-glass" />
-</template>
-```
+### Icon Component
 
-- the `UIcon` component to use icons anywhere:
+You can use the [Icon](/components/icon) component with a `name` prop to display an icon:
 
-```vue
-<template>
-  <UIcon name="i-heroicons-moon" class="w-5 h-5 text-primary-500" />
-</template>
-```
+::component-code{slug="icon"}
+---
+props:
+  name: 'i-heroicons-light-bulb'
+  class: 'size-5'
+---
+::
 
-### Collections
+### Component Props
 
-It's highly recommended to install the icons collections locally with:
+Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:
+
+::component-code{slug="button"}
+---
+ignore:
+  - color
+  - variant
+props:
+  icon: i-heroicons-sun
+  variant: subtle
+slots:
+  default: Button
+---
+::
+
+## Collections
+
+### Iconify Dataset
+
+It's highly recommended to install the icon data locally with:
 
 ::code-group
 
@@ -52,10 +68,52 @@ npm install @iconify-json/{collection_name}
 
 For example, to use the `i-uil-github` icon, install it's collection with `@iconify-json/uil`. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.
 
-::callout{icon="i-heroicons-light-bulb" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
-Read more about custom collections in the `@nuxt/icon` documentation.
+::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#iconify-dataset" target="_blank"}
+Read more about this in the `@nuxt/icon` documentation.
+::
+
+### Custom Local Collections
+
+You can use local SVG files to create a custom Iconify collection.
+
+For example, place your icons' SVG files under a folder of your choice, for example, `./assets/icons`:
+
+```bash
+assets/icons
+├── add.svg
+└── remove.svg
+```
+
+In your `nuxt.config.ts`, add an item in `icon.customCollections`:
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ],
+  icon: {
+    customCollections: [{
+      prefix: 'custom',
+      dir: './assets/icons'
+    }]
+  }
+})
+```
+
+Then you can use the icons like this:
+
+```vue
+<template>
+  <UIcon name="i-custom-add" />
+</template>
+```
+
+::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
+Read more about this in the `@nuxt/icon` documentation.
 ::
 
 ## Theme
 
+You can change the default icons used by Nuxt UI components in your `app.config.ts`:
+
 :icons-theme