Custom icon support in all related components

[Magiczne]

Describe the feature you would like to see added

Currently only few components like menu support icon classes. When using PrimeVue with custom theme it is very hard to customize icons without including svgs in the css.

A way to change icons with props would be great

Is your feature request related to a problem?

No response

Describe the solution you'd like

No response

Describe alternatives you have considered

No response

Additional context

No response

[bahadirsofuoglu]

Hi,
In which components do you think this need is necessary? Components that are usually used with an icon have this prop. But if there is a component that you think is missing, we would like to evaluate it. For such cases, templating can be used. You can look at the documentation.

[Magiczne]

Thanks for quick response

• Accordion - toggle icon Was already done
• (AutoComplete: Allow custom icons #3004) Autocomplete
• (Breadcrumb: Allow custom icons #3194) Breadcrumbs - separator icon
• (Calendar: Allow custom icons #3081) Calendar - arrows in the header,
• (CascadeSelect: Allow custom icons #3000) CascadeSelect - arrows,
• (Checkbox: Allow custom icons #3298) Checkbox - check icon
• (Chips: Allow custom icons #3052) Chips - removeTokenIcon
• DataTable - many icons, as well as paginator (Blocked by Paginator: Allow custom icons #3187)
• DataView - paginator icons (Blocked by Paginator: Allow custom icons #3187)
• (Dialog: Allow custom icons #3054) Dialog - re-templating entire header because of icon seems kinda non-intuitive
• (Dialog: Allow custom icons for maximizing #3192) Dialog - minimize and maximize icons
• (Dropdown: Allow custom icons #2998) Dropdown - can't see a way to override arrow and search icon in search input
• FileUpload - remove icon Was already done
• (Galleria: Allow custom icons #3493) Galleria - all icons
• (Image: indicator icon property #3492) Image - editor icons, as indicator is fully customizable with slot.
• (Inplace: Allow custom icons #3134) Inplace - close icon
• (Listbox: Allow custom icons #3006) ListBox
• (Message: Allow custom icons #3059) Message - close icon
• (Multiselect: Allow custom icons #3008) Multiselect - same as dropdown
• (OrderList: Allow custom icons #3312) OrderList - sorting icons
• (Paginator: Allow custom icons #3187) Paginator - arrows
• (Panel: Allow custom icons #3307) Panel - collapse icon
• (Panel Menu: Allow custom icons #3338) PanelMenu - toggle icons
• (Pick List: Allow custom icons #3314) PickList - move icons
• (Sidebar: Allow custom icons #3057) Sidebar - close icon
• (TabView: Allow custom icons #3185) TabView - previous and next icons
• (Toast: Allow custom icons #3061) Toast - close icon and no way to customize severity icon, opposite to message
• (Tree: Allow custom icons #3136) Tree and TreeNode - checkbox and search, as arrows are already customizable through node properties
• (Tree Select: Allow custom icons #3079) TreeSelect - arrows
• TreeTable - many icons, as well as paginator (Blocked by Paginator: Allow custom icons #3187)
• (TriStateCheckbox: Allow custom icons #3299) TriStateCheckbox - true and false icons

[tugcekucukoglu]

It's on our roadmap.

Thanks for your attention.

[Magiczne]

@tugcekucukoglu are you open for Pull requests? I think i am able to do it.

[tugcekucukoglu]

We would be grateful if you create a PR with the possible solution. As you know, this is a huge change. If you want to contribute PrimeVue, please create a separate issue and a PR for each component.

Thanks for your understanding.

[ineshbose]

I appreciate that this has been considered and really fast, promising progress is being made.
I wonder if this issue can remain open until the whole checklist of components is done, but that is still a call based on the maintainer's preferences, however I wanted to point out a PR ahead of it's time: #1643

PrimeIcons is set-up as default and there's motivation to continue using it because PrimeVue is configured already so it's rather easy; and while the custom icons are now available to be used as props passed to the components as strings specifying icon CSS classes, there are some other aspects that may make icons as components preferable. This popular post (which I'm sure you've come across) discusses it a bit I believe - https://antfu.me/posts/icons-in-pure-css. So even though these changes are being made, I wonder if these could've been in a Icon component provider (doesn't need to be Iconify, because people may still use others, so that can hopefully be passed in configuration), or maybe it would be considered in the roadmap?

[bahadirsofuoglu]

Hi @ineshbose,
This enhancement was the first step to icon customizability. It continues to happen with the awesome support of @Magiczne. The next step will be for the headless mode. Templating will be possible in the fields given for the icon. Thank you very much for your suggestions and kind message.

[BryceBarbara]

@ineshbose Thanks for the call out. It's nice knowing someone else saw the work even if it eventually got tossed in the end

[ineshbose]

Being a third-party spectator of this PR and using PrimeVue for a bit with recent updates, I wouldn't say it was tossed. If that were the case, 90% of my PRs to open source have been tossed 😄

Thanks again for this PR for historical records!

[r25s]

Hi. I just started using this fantastic framework. However, the first thing I'm trying to do is add a Menubar, and I realize there isn't the possibility to use custom icons. Prime Icons is just not the style I want, nor does it contain all the icons I need - so this is a bit of a dealbreaker for me. I would prefer to simply specify the icon component I wish to use.

But I really like the promise of this framework, so I hope this can be resolved soon.

Please add the Menubar to the list of components which need custom icons. Thank you.