\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_",[3156,3157,3160],{"name":3140,"color":3141},{"name":3158,"color":3159},"v3","49DCB8",{"name":3143,"color":3144},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.74489844,{"description":3167,"labels":3168,"number":3172,"owner":3146,"repository":3147,"state":3148,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Description\n\nHey 👋,\n\nRecently, you add variants, https://ui.nuxt.com/components/card#variant, to Card. Do you think that Modal could have the same?\n\n### Additional context\n\n_No response_",[3169,3170,3171],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},4749,"Add variants to Modal component","2025-08-14T18:24:37Z","https://github.com/nuxt/ui/issues/4749",0.76204437,{"description":3178,"labels":3179,"number":3180,"owner":3146,"repository":3181,"state":3148,"title":3182,"updated_at":3183,"url":3184,"score":3185},"\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":3187,"labels":3188,"number":3192,"owner":3146,"repository":3147,"state":3148,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Package\n\nv3.x\n\n### Description\n\nIn most softwares I'm aware of (Discord, Github being 2 examples I checked) escape is shown as 'Esc' or 'ESC' and Nuxt UI should follow this established practice - personally I thought there was a bug when I saw this symbol instead of 'Esc' (clear selection below).\n\n\u003Cimg width=\"222\" height=\"281\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b47a42b5-dd0e-460a-adab-bf9777973219\" />\n\nPerhaps a wider task should be considered to allow a custom label or icon so the user can decide if they want to override any of these extra key captures (enter/up arrow/etc). Delete also for example I would rather show the backspace icon or 'del'.\n\n### Additional context\n\n\u003Cimg width=\"713\" height=\"280\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a3d0e2de-eb10-48cd-821f-846650de9789\" />\n\n\u003Cimg width=\"759\" height=\"385\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c82a7252-4eaf-4faf-ba05-605486e3ae8e\" />",[3189,3190,3191],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},4940,"Update Escape Kdb or add optional Kbd labels/icons","2025-09-10T18:22:35Z","https://github.com/nuxt/ui/issues/4940",0.76876974,{"description":3198,"labels":3199,"number":3202,"owner":3146,"repository":3147,"state":3148,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### Package\n\nv3.x\n\n### Description\n\nI want to use CheckboxGroup to choose from a list of users with avatars (like in USelectMenu [example](https://ui.nuxt.com/components/select-menu#with-avatar-in-items)).\nTo implement this I need to pass a list of items with a type \"CheckboxGroupItem\", which doesn't have an Avatar field.\nAs an idea it's possible to use SelectMenuItem or DropdownMenuItem merged with CheckboxGroupItem.\nAlso it is possible to use `#label` slot in CheckboxGroup, but need an example, how to use it. \nSeems that you can't pass avatar to the slot as field of the item nether.\n\n### Additional context\n\n_No response_",[3200,3201],{"name":3140,"color":3141},{"name":3143,"color":3144},4848,"[Checkbox and CheckboxGroup] Add Avatar before and after the label","2025-08-30T07:46:47Z","https://github.com/nuxt/ui/issues/4848",0.77080643,{"description":3208,"labels":3209,"number":3214,"owner":3146,"repository":3147,"state":3215,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### Description\n\nUse case: Dynamically loaded icons are forbidden, be it by security requirements or by a requirement to always work offline. Icons are instead defined as Vue components, be it with custom icon components, or by using [`unplugin-icons`](https://github.com/unplugin/unplugin-icons).\n\nIn case of a [`UButton`](https://ui.nuxt.com/components/button), I think you can just use `leading` and `trailing` slots. But I do not think there is a simple way of just replacing an icon in case of [`USlideover`](https://ui.nuxt.com/components/slideover)'s `closeIcon` -- there is only a slot named `close`.\n\n### Additional context\n\n_No response_",[3210,3211,3212],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3213,"color":3159},"v4",4728,"closed","Allow passing components as icons instead of strings","2025-09-01T10:04:35Z","https://github.com/nuxt/ui/issues/4728",0.69353473,{"description":3221,"labels":3222,"number":3226,"owner":3146,"repository":3147,"state":3215,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### 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_",[3223,3224,3225],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},3827,"[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":3232,"labels":3233,"number":3237,"owner":3146,"repository":3147,"state":3215,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### 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_",[3234,3235,3236],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},4481,"thoughts on UIcon/Iconify","2025-07-10T09:59:29Z","https://github.com/nuxt/ui/issues/4481",0.7257179,{"description":3243,"labels":3244,"number":3250,"owner":3146,"repository":3147,"state":3215,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### 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```",[3245,3248,3249],{"name":3246,"color":3247},"bug","d73a4a",{"name":3158,"color":3159},{"name":3143,"color":3144},4162,"`Input`'s default loading icon needs improvement","2025-05-16T16:06:11Z","https://github.com/nuxt/ui/issues/4162",0.7472288,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f849zU4wiw1L8QmCzMGcW3UkjPzxr-VrwZ--u1xWBTMg":-1},"/nuxt/ui/4030"]