feat(Icon): switch to nuxt-icon with dynamic prop or app config (#862)

docs/content/2.elements/7.icon.md

@@ -1,5 +1,5 @@
 ---
-description: Display an icon from Iconify library.
+description: Display any icon (100,000+) from Iconify.
 links:
   - label: GitHub
     icon: i-simple-icons-github
@@ -8,6 +8,8 @@ links:
 
 ## Usage
 
+Use the `name` prop by following this pattern: `i-{collection_name}-{icon_name}`. You can search any icon from [Iconify](https://iconify.design/) using https://icones.js.org.
+
 ::component-card
 ---
 props:
@@ -16,9 +18,35 @@ props:
 ::
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
-When playing with the `name` prop above, you won't be able to use any icon you want as icons are bundled on build as explained in the [theming section](/getting-started/theming#icons).
+You won't be able to use any icon in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons), read more about this in [Theming](/getting-started/theming#icons).
 ::
 
+### Dynamic :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+You can use the `dynamic` prop to enable dynamic icon loading. This will use [`nuxt-icon`](https://github.com/nuxt-modules/icon) instead and allow you to use any icon from [Iconify](https://iconify.design/) as well as the `{collection_name}:{icon_name}` pattern.
+
+This can be quite useful when using [dynamic class names](https://tailwindcss.com/docs/content-configuration#dynamic-class-names) or for icons that are not bundled by default (fetched from a database for example).
+
+::component-card
+---
+props:
+  name: 'i-ph-rocket-launch'
+  dynamic: true
+---
+::
+
+You can also change the default behavior of the `dynamic` prop by setting the `ui.icons.dynamic` option in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      dynamic: true
+    }
+  }
+})
+```
+
 ## Props
 
 :component-props