\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3035,3036,3039],{"name":3019,"color":3020},{"name":3037,"color":3038},"v3","49DCB8",{"name":3022,"color":3023},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.74489844,{"description":3046,"labels":3047,"number":3048,"owner":3025,"repository":3049,"state":3027,"title":3050,"updated_at":3051,"url":3052,"score":3053},"\u003Cimg width=\"1236\" height=\"582\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/569543d6-e4ef-4208-b371-1429851d8a27\" />\n\n\u003Cimg width=\"912\" height=\"578\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/71fb37a4-3959-413f-9076-74f63eee0108\" />\n\nNormal button:\n```html\n\u003CUButton\n color=\"info\"\n variant=\"soft\"\n size=\"xl\"\n icon=\"i-heroicons-question-mark-circle\"\n class=\"rounded-full\"\n aria-label=\"Show keyboard shortcuts\"\n />\n```\n\nIm using Nuxt4 and NuxtUI 3",[],416,"icon","NuxtUI icons forced to width and height 1em!","2025-07-22T16:50:58Z","https://github.com/nuxt/icon/issues/416",0.76786214,{"description":3055,"labels":3056,"number":3060,"owner":3025,"repository":3026,"state":3027,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Description\n\nIn InputNumber, the props used for the Increment and Decrement button are not passed to their slots, this causes difficulty in attempting to access those props in the case functionality needs to be added/overridden, but aesthetics (or ARIA) want to be maintained.\n\nThe increment button is an example of this, whereby `incrementIcon`, `color`, `size`, the translation, and the v-bind props for the button aren't passed to the slot. Thus, to access them again, code needs to be duplicated in order to recompute these properties, and defeats the purpose of DRY code. https://github.com/nuxt/ui/blob/f761369888c49fd0ee0f028dcf3c55dd5fbd2cae/src/runtime/components/InputNumber.vue#L176-L185\n\nA possible, simple solution might look like this (using scoped slots):\n```vue\n \u003Cslot name=\"increment\" :icon=\"incrementIcon\" :color=\"color\" :size=\"size\" :aria-label=\"t('inputNumber.increment')\" variant=\"link\" :bind=\"typeof increment === 'object' ? increment : undefined\"> \n \u003CUButton \n :icon=\"incrementIcon\" \n :color=\"color\" \n :size=\"size\" \n variant=\"link\" \n :aria-label=\"t('inputNumber.increment')\" \n v-bind=\"typeof increment === 'object' ? increment : undefined\" \n /> \n \u003C/slot> \n```\n\n### Additional context\n\nI believe this is common throughout the library, and was wondering to post this issue or not given that there might already be a specific reason. But alas, I couldn't find one in the issues.\n\ncc, from #4411",[3057,3058,3059],{"name":3019,"color":3020},{"name":3037,"color":3038},{"name":3022,"color":3023},4435,"InputNumber increment/decrement button props not being passed to their respective slots","2025-07-01T17:13:20Z","https://github.com/nuxt/ui/issues/4435",0.7689473,{"description":3066,"labels":3067,"number":3071,"owner":3025,"repository":3026,"state":3072,"title":3073,"updated_at":3074,"url":3075,"score":3076},"### Description\n\nI’ve been trying to display an avatar with a chip inside a `UCommandPalette` item (and `UButton`, …), but it looks like this use case isn't currently supported. \n\n### Additional context\n\n_No response_",[3068,3069,3070],{"name":3019,"color":3020},{"name":3037,"color":3038},{"name":3022,"color":3023},3827,"closed","[UCommandPalette] Support for avatars with chips in `UCommandPalette` items (and `UButton`, …)","2025-05-28T10:46:31Z","https://github.com/nuxt/ui/issues/3827",0.72345394,{"description":3078,"labels":3079,"number":3083,"owner":3025,"repository":3026,"state":3072,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Description\n\nHi there. We are moving our app to NuxtUI and we are loving it so far! Really appreciative of all your hard work on this amazing package. Our stack is NuxtUI+Inertia+Rails.\n\nI spent part of my weekend digging into UIcon and Iconify. Pardon my ignorance if I've missed something obvious, I'm new to this part of the ecosystem... I thought it would be useful to put some thoughts in here and collect what I've learned.\n\n1. UIcon/Iconify always load icons from the network (`api.iconify.design`)\n2. It's not really possible to use NuxtUI without relying heavily on UIcon/Iconify due to various icon attributes in the components.\n3. I know unplug-icons and Nuxt have some support for bundled icons, but they don't apply if you are using Nuxt UI standalone.\n\nSee #4167 and others\n\nWe want to bundle our icons to avoid a dependency on api.iconify.design. I ended up writing a script that scanned our app for icon names and builds a custom `icons.json` file. I put some custom icons in there too using `@iconify/tools`... `icons.json` can be loaded into iconify with `addCollection()`. In dev I also warn on missing icons via `setCustomIconsLoader()`.\n\nDoes that sound correct? Are there solutions I'm missing?? I'd be happy to contribute doc updates or whatever if that would be helpful.\n\nThanks again!\n\n### Additional context\n\n_No response_",[3080,3081,3082],{"name":3019,"color":3020},{"name":3037,"color":3038},{"name":3022,"color":3023},4481,"thoughts on UIcon/Iconify","2025-07-10T09:59:29Z","https://github.com/nuxt/ui/issues/4481",0.7257179,{"description":3089,"labels":3090,"number":3096,"owner":3025,"repository":3026,"state":3072,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/input#loading-icon\n\n### Description\n\nBoth icons, the one shown in the example `i-lucide-repeat-2` and the component's default prop, `i-lucide-refresh-cw` look bad when rotated. I think there's a lot of room for improvement, these icons aren't meant to be animated.\n\nLuckily, there are some Lucide icons which _are_ designed to be animated.\n\nHow about https://lucide.dev/icons/loader-circle?\n\nOr https://lucide.dev/icons/loader?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3091,3094,3095],{"name":3092,"color":3093},"bug","d73a4a",{"name":3037,"color":3038},{"name":3022,"color":3023},4162,"`Input`'s default loading icon needs improvement","2025-05-16T16:06:11Z","https://github.com/nuxt/ui/issues/4162",0.7472288,{"description":3102,"labels":3103,"number":3106,"owner":3025,"repository":3107,"state":3072,"title":3108,"updated_at":3109,"url":3110,"score":3111},"New design: \n\n\n\nFigma link: https://www.figma.com/file/3yI3EtwxPjZwiqQrW9OLnH/%E2%9B%B0%EF%B8%8F---User-Interface?node-id=1129%3A50713&t=P5AiTxdpTKZ8SqFb-4\n\nLinks:\n- Download Design Kit: ZIP file with logos\n- Preview guidelines: https://www.figma.com/file/DOO3neicujKl3ymcqUg9dK/%E2%9B%B0%EF%B8%8F---Nuxt-Brand-Guidelines?node-id=0%3A1&t=qBS3UqvGpjrIkxIm-1",[3104],{"name":3019,"color":3105},"1ad6ff",1052,"nuxt.com","[/designkit] Add a button + change links on the hero","2023-09-05T08:18:50Z","https://github.com/nuxt/nuxt.com/issues/1052",0.7571422,{"description":3113,"labels":3114,"number":3115,"owner":3025,"repository":3049,"state":3072,"title":3116,"updated_at":3117,"url":3118,"score":3119},"url(\"data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M20 6c0-2.168-3.663-4-8-4S4 3.832 4 6v2c0 2.168 3.663 4 8 4s8-1.832 8-4V6zm-8 13c-4.337 0-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3c0 2.168-3.663 4-8 4z' fill='black'/%3E%3Cpath d='M20 10c0 2.168-3.663 4-8 4s-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3z' fill='black'/%3E%3C/svg%3E\")\r\n\r\nThe test environment is fine, but the production environment will not be able to display the icon. If I change the https in xmlns to http, it will display.\r\n\r\n\r\n\r\n",[],221,"[Bug] Icon cannot be displayed when used with nuxt-ui","2024-08-11T05:47:37Z","https://github.com/nuxt/icon/issues/221",0.76131856,{"description":3121,"labels":3122,"number":3126,"owner":3025,"repository":3026,"state":3072,"title":3127,"updated_at":3128,"url":3129,"score":3130},"### Description\n\nThe [popover](https://ui.nuxt.com/components/popover) uses the content of the default slot to create a trigger, but there is no way to provide a custom anchor. A `\u003Ctemplate #anchor>` slot for this purpose would be great.\n\n```html\n\u003CUFormField label=\"name\" name=\"name\">\n \u003CUPopover :open=\"isAutoCompleteOpen\">\n \u003Ctemplate #anchor>\n \u003CUInput v-model=\"state.name\" />\n \u003C/template>\n \u003Ctemplate #content>\n \u003CPlaceholder class=\"size-48 m-4 inline-flex\" />\n \u003C/template>\n \u003C/UPopover>\n\u003C/UFormField>\n```\n\nMy use case is building an autocomplete for a text input. The `InputMenu` is not suitable because the dropdown is too intrusive.\n\n### Additional context\n\n_No response_",[3123,3124,3125],{"name":3019,"color":3020},{"name":3037,"color":3038},{"name":3022,"color":3023},4013,"Add ability to provide an anchor for the popover","2025-05-22T15:04:18Z","https://github.com/nuxt/ui/issues/4013",0.76336104,["Reactive",3132],{},["Set"],["ShallowReactive",3135],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f849zU4wiw1L8QmCzMGcW3UkjPzxr-VrwZ--u1xWBTMg":-1},"/nuxt/ui/4030"]