Icons

@we/nuxt3 enables the @nuxt/icon client bundle automatically. The main goal of this setup is to avoid runtime network requests to external icon providers (such as Material Design or other CDN-based sets) and ensure that icons keep working even without an internet connection.

Basic configuration

icon: {
  // Nuxt will scan vue, js and ts files for icon usage
  clientBundle: {
    icons: [
      // You can add custom icons here to force their inclusion
    ],
  },
},

Required dependencies

It is mandatory to install the following dev dependency:

"@iconify-json/mdi": "^version"

If you use additional icon sets, you must also install their related @iconify-json/* packages as devDependencies, for example:

"@iconify-json/material-symbols": "^version"

NB: Each icon set used by the application must be explicitly installed, otherwise the icons will NOT be bundled.

How it works

• @we/nuxt3 configures @nuxt/icon with the client bundle enabled.
• Nuxt scans all .vue, .js, and .ts files to detect used icons.
• When Vuetify is present, icon aliases are automatically resolved to the corresponding Iconify names.
• All detected icons are embedded directly into the client bundle.
• No external HTTP requests to icon CDNs are performed at runtime.