\u003C/svg>\n```\n\n\n\nnuxt.config.ts\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: '2024-04-03',\n devtools: { enabled: true },\n modules: ['@nuxt/ui', '@nuxtjs/html-validator'],\n css: ['~/assets/css/main.css'],\n icon: {\n customCollections: [{\n prefix: 'custom',\n dir: './assets/icons'\n }]\n },\n\n // modules\n htmlValidator: {\n usePrettier: false,\n },\n})\n```\n\nin my component SFooter.vue:\n\n```vue\n\u003Cnav aria-label=\"Social Media Links\" class=\"mb-4 flex space-x-6 md:mb-0\">\n \u003Cnuxt-link\n v-for=\"social in socialLinks\"\n :key=\"social.name\"\n :href=\"social.link\"\n :aria-label=\"social.name\"\n class=\"hover:text-gray-700\">\n \u003CUIcon :name=\"social.icon\" class=\"size-5\" aria-hidden=\"true\" />\n \u003Cspan class=\"sr-only\">Visit our {{ social.name }} page\u003C/span>\n \u003C/nuxt-link>\n \u003C/nav>\n\n\n\u003Cscript setup lang=ts>\nconst socialLinks = [\n {\n name: 'SoundCloud',\n link: '#',\n icon: 'i-custom-soundcloud',\n },\n...\n\n```\n\n\n\n\n### Description\n\nI get the warning in console: `WARN [Icon] failed to load icon custom:soundcloud`\n\nand nothing displaying on front end\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2076,2077,2080,2081],{"name":1985,"color":1986},{"name":2078,"color":2079},"duplicate","cfd3d7",{"name":2018,"color":2019},{"name":2082,"color":2083},"upstream","78bddb",2609,"custom icons not working","2024-11-15T00:46:19Z","https://github.com/nuxt/ui/issues/2609",0.6806001,{"description":2090,"labels":2091,"number":2092,"owner":1991,"repository":2093,"state":2057,"title":2094,"updated_at":2095,"url":2096,"score":2097},"Hello there!\r\n\r\nEvery since your beautiful new website update, our Nuxt 3 module, `sidebase/nuxt-auth` has been displaying the message: \"This module is not yet compatible with Nuxt 3\".\r\n\r\n\r\n\r\nInside of our [file in this repo](https://github.com/nuxt/modules/blob/main/modules/sidebase-auth.yml), we do list that we support Nuxt 3. How do we resolve this issue? Is there something we need to update here to ensure this message goes away? \r\n\r\nThank you very much!",[],1395,"nuxt.com","Since website update, some Nuxt 3 modules, display they are not compatible with Nuxt 3","2023-10-25T10:25:05Z","https://github.com/nuxt/nuxt.com/issues/1395",0.68418497,{"description":2099,"labels":2100,"number":2104,"owner":1991,"repository":2008,"state":2057,"title":2105,"updated_at":2106,"url":2107,"score":2108},"### Environment\n\n- Operating System: Linux\n- Node Version: v23.5.0\n- Nuxt Version: -\n- CLI Version: 3.23.0\n- Nitro Version: -\n- Package Manager: pnpm@10.6.2\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/button#label\n\n### Description\n\nthe buttons should have cursor pointer by default.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2101,2102,2103],{"name":1985,"color":1986},{"name":2078,"color":2079},{"name":2018,"color":2019},3552,"Button | should have `cursor-pointer` by default","2025-03-19T20:46:13Z","https://github.com/nuxt/ui/issues/3552",0.6859791,{"description":2110,"labels":2111,"number":2115,"owner":1991,"repository":2008,"state":2057,"title":2116,"updated_at":2117,"url":2118,"score":2119},"### Description\n\n### Description\n\n**Problem Statement:**\nWhen using a horizontal layout, having too many menu items can lead to a cluttered interface on smaller screens. This can negatively impact the user experience as the menu becomes overwhelming or improperly formatted.\n\n\n\n**Desired Functionality:**\nWe propose that \u003CUNavigationMenu> implements an internal mechanism to manage responsive menu item display. This functionality should work as follows:\n\n**Horizontal Mode:**\nWhen the menu is rendered horizontally, items that are configured with the optional hideOnMobile property should only be displayed if the screen width exceeds the specified breakpoint (e.g., 'lg'). This allows for a cleaner, less crowded horizontal menu on mobile devices.\n\n**Fallback Behavior:**\nIf a menu item does not have a hideOnMobile property defined, it should always be displayed, regardless of screen size.\n\n**Vertical Mode:**\nThe responsive hiding functionality should only apply when the menu is in horizontal mode. In vertical mode, all menu items should remain visible, independent of any hideOnMobile settings.\n\n\n\n**Benefits for Developers:**\nThis approach provides a clear and flexible API, allowing developers to simply set the desired breakpoint directly in the menu items configuration. The \u003CUNavigationMenu> component will then automatically apply the appropriate CSS classes based on the current layout and screen size. This keeps the menu configuration clean and minimizes manual CSS adjustments while ensuring a consistent and user-friendly interface across different devices.\n\n\n\n```\nconst items = [\n {\n label: 'Always Visible',\n to: '/always'\n },\n {\n label: 'Responsive Item',\n to: '/responsive',\n hideOnMobile: 'lg'\n }\n]\n```\n\n\n\n### Additional context\n\n_No response_\n\n### Additional context\n\n_No response_",[2112,2113,2114],{"name":2002,"color":2003},{"name":2018,"color":2019},{"name":2005,"color":2006},3492,"Responsive Menu Items in \u003CUNavigationMenu>","2025-03-28T17:42:33Z","https://github.com/nuxt/ui/issues/3492",0.69023466,["Reactive",2121],{},["Set"],["ShallowReactive",2124],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"RcVrUSmYCzbBTM5FSHnHmSXrNGFv4jEOIOkWc_bDRkY":-1},"/nuxt/nuxt.com/1114"]