method to call the local SVG.\nI'm using .icon { color: var(--neutral); } to control the color, but the icon is still always black.",[],423,"nuxt","icon","open","Custom icons cannot change color and the overlay svg color is still black","2025-08-23T07:09:20Z","https://github.com/nuxt/icon/issues/423",0.62969714,{"description":3143,"labels":3144,"number":3151,"owner":3135,"repository":3152,"state":3137,"title":3153,"updated_at":3154,"url":3155,"score":3156},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.0\n- CLI Version: 3.13.1\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.4.1\n- Builder: -\n- User Config: colorMode, modules, devtools, ssr, runtimeConfig, vite, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.12.3, @nuxt/eslint@1.4.1\n- Build Modules: -\n\n\n\n### Version\n\nv2.12.3 (and Documentation Page)\n\n### Reproduction\n\nhttps://ui2.nuxt.com/components/input#icon\n\norange: color is applied to the icon\n\u003Cimg width=\"344\" height=\"137\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/60671830-8cf2-408e-a11f-30966cad4602\" />\n\n\namber: not applied\n\u003Cimg width=\"435\" height=\"134\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b9cffe65-9d2a-41f2-8e9d-b0dcb17ac4f4\" />\n\n### Description\n\n### Describe the bug\n\nWhen using `UInput`, the `color` prop sometimes fails to apply to the icon (`leading-icon` or `trailing-icon`). Specifically, if the color value is lexicographically *before* `\"gray\"` (e.g., `\"blue\"`), the icon appears with the `gray` color instead. If the color value is after `\"gray\"` (e.g., `\"red\"`, `\"teal\"`), it works correctly.\n\n### Expected behavior\n\nThe icon color should follow the specified `color` prop regardless of its string value.\n\n### Actual behavior\n\nFor certain colors (like `\"blue\"`), the icon appears with `gray` color instead of the specified color.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3145,3148],{"name":3146,"color":3147},"bug","d73a4a",{"name":3149,"color":3150},"triage","ffffff",4525,"ui","color prop on UInput does not apply to icon in some cases","2025-07-14T10:36:41Z","https://github.com/nuxt/ui/issues/4525",0.6879063,{"description":3158,"labels":3159,"number":3160,"owner":3135,"repository":3136,"state":3137,"title":3161,"updated_at":3162,"url":3163,"score":3164},"I'm using only custom icon collections via customCollections, but when clientBundle.scan is enabled, the build includes thousands of icons from unrelated collections in the final bundle (icons.json). This happens even though no other icon sets are used anywhere in the project. I expect the bundle to include only the icons I actually use from my defined collections.\n\n\n\nThis is the request that happens at the start of the app, loading nearly 8,000 icons, while my custom icon set only has 60 icons. How can I configure the bundler or Nuxt Icon so that only these 60 icons are included in the final bundle instead of the entire collection?",[],410,"@nuxt/icon includes unrelated icons in icons.json when only using customCollections with scan: true","2025-06-30T17:38:24Z","https://github.com/nuxt/icon/issues/410",0.7115861,{"description":3166,"labels":3167,"number":3168,"owner":3135,"repository":3136,"state":3137,"title":3169,"updated_at":3170,"url":3171,"score":3172},"I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the `nuxt-icons` module does not meet my expectations (import all icons), so I decided to use your solution.\r\n\r\nWhen I hold the icon in `/components/global` everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.\r\n\r\nI would also love to be able to use `param-case` in the `name` property.\r\n\r\nReproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts",[],48,"Can't use svg icons from nuxt layer","2024-05-07T08:36:47Z","https://github.com/nuxt/icon/issues/48",0.7143771,{"description":3174,"labels":3175,"number":3176,"owner":3135,"repository":3136,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"I have tried every method such as add \u003Cfill=\"XXX\">\u003Ccolor=\"XXX\"> in css code globally,add code \"fill= currentcolor\" in svg,add file\"app.config.ts\",but the icon color no change in black .\nI use local icons, and this situation will not occur with non-local icons.\nCan anyone tell me what causes this?\nThe version of Nuxt-Icon is v1.15.0 (latest).",[],415,"closed","Why my Nuxt-Icon color cannot able to change color?","2025-07-19T01:13:30Z","https://github.com/nuxt/icon/issues/415",0.67520523,{"description":3183,"labels":3184,"number":3185,"owner":3135,"repository":3136,"state":3177,"title":3186,"updated_at":3187,"url":3188,"score":3189},"So in my case in nuxt.config.ts i described custom collection \r\nicon: {\r\n customCollections: [\r\n {\r\n prefix: 'elfi',\r\n dir: './assets/icons'\r\n },\r\n ],\r\n}\r\n\r\nif in my directory lies files with EN names - all works fine\r\nif i put there file with cyrillic (for ex RU) name - the nuxt even can't start properly with \"npm run dev\" - blank screen with no errors\r\n\r\nand one else thing - if i make some changes in folder with icons - i need to terminate nuxt and run again \"npm run dev\" to activate changes",[],201,"Seems like @nuxt/icon doesn't understand other language in files name in local icon collection","2024-07-16T20:38:16Z","https://github.com/nuxt/icon/issues/201",0.688318,{"description":3191,"labels":3192,"number":3185,"owner":3135,"repository":3196,"state":3177,"title":3197,"updated_at":3198,"url":3199,"score":3189},"### 🆒 Your use case\r\n\r\nI would love to use the `ScriptGoogleMaps` component but I dont like the static placeholder. Instead I would like to immediately display the map.\r\n\r\n### 🆕 The solution you'd like\r\n\r\nAdd a prop to disable the placeholder / static map feature entirely.\r\n\r\n### ℹ️ Additional info\r\n\r\nReasons:\r\n- Static Map has a max resolution that is very low and therefor always looks blurry on high dpi screens\r\n- Static Map cant be [styled](https://snazzymaps.com/)\r\n- It takes some time until the scripts are loaded and the map is initialized. Therefor the \"activate map on hover\" doesnt work from a UX perspective",[3193],{"name":3194,"color":3195},"enhancement","a2eeef","scripts","Google Maps: Add option to disabled placeholder","2024-09-03T15:45:42Z","https://github.com/nuxt/scripts/issues/201",{"description":3201,"labels":3202,"number":3209,"owner":3135,"repository":3135,"state":3177,"title":3210,"updated_at":3211,"url":3212,"score":3213},"I have a application with nuxt and vuetify, I am creating a custom theme and adding color variables there, when my app intiially loads those color variables rendered empty and it shows black UI and after couple of seconds my vuetify components get colored.\n\nI have tried to debug the solution but could not any solution, so any help will be much appericiated.",[3203,3206],{"name":3204,"color":3205},"pending triage","E99695",{"name":3207,"color":3208},"needs reproduction","FBCA04",32706,"Initially set vuetify color variables.","2025-07-21T16:12:08Z","https://github.com/nuxt/nuxt/issues/32706",0.6895105,{"description":3215,"labels":3216,"number":3217,"owner":3135,"repository":3136,"state":3177,"title":3218,"updated_at":3219,"url":3220,"score":3221},"`\u003CIcon name=\"uil:github\" color=\"red\" />`\r\nreturns\r\n\r\n**App.config.ts**\r\n```\r\n// https://github.com/nuxt-modules/icon#configuration-%EF%B8%8F\r\nexport default defineAppConfig({\r\n icon: {\r\n size: \"300%\", // default \u003CIcon> size applied\r\n class: \"icon\", // default \u003CIcon> class applied\r\n mode: \"css\", // svg || css\r\n aliases: {\r\n nuxt: \"logos:nuxt-icon\",\r\n },\r\n },\r\n})\r\n```\r\n",[],176,"Add universal support for color attribute (similar to CSS icons)","2024-07-15T16:06:31Z","https://github.com/nuxt/icon/issues/176",0.69734,{"description":3223,"labels":3224,"number":3239,"owner":3135,"repository":3152,"state":3177,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Description\n\nHello.\n\nIs it possible to make a collection of local custom icons for Vue, as described in the documentation section for Nuxt?",[3225,3228,3231,3234,3237],{"name":3226,"color":3227},"question","d876e3",{"name":3229,"color":3230},"v3","49DCB8",{"name":3232,"color":3233},"vue","42b883",{"name":3235,"color":3236},"closed-by-bot","ededed",{"name":3238,"color":3236},"stale",4298,"Custom icon collection.","2025-08-20T02:08:20Z","https://github.com/nuxt/ui/issues/4298",0.70843244,["Reactive",3245],{},["Set"],["ShallowReactive",3248],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRetPmiH8GXd5NA3xh7BX5H6lXhaSh6r2NO6m0fu5wVE":-1},"/nuxt/icon/402"]