SelectOneMenu: add support to use icons

Description At this time we are allowed to use icons at SelectOneMenu, but only when the options are expanded. We can see an example in the showcase: https://www.primefaces.org/showcase/ui/input/oneMenu.xhtml. My suggestion is to improve the component to allow us to add only an icon like InputGroup component is.

Additional context Below a screenshot with my proposal. On the right side is the current behavior: the only text is allowed. In the left side the component with icon only support:

Example XHTML

<p:selectOneMenu  value="#{selectOneMenuView.theme}">
    <f:selectItems value="#{selectOneMenuView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
    <p:column>
        <f:facet name="some-facet-name">
             <i class="pi pi-check"></i> <!-- this can be an icon, or another HTML component like image, etc -->
        </facet>
        <h:outputText value=" #{theme.name}" />
    </p:column>
</p:selectOneMenu>

With some guidance, helping me to understand the better design for this change, I can try a PR if you like the idea.

Thank you

[garcia-jj]

Hello @melloware. Thank you for you time on this.

The InputGroup is not possible here because it is static. What I need is like an InputGroup, but dynamic. This is the reason because I choose SelectOneMenu.

In my case, I have a contact form, and the user needs to set their contact type (if e-mail, cellphone, home phone or work phone). At this time I have this component:

But when the user selects an option, the SelectOneMenu looks like this (without the related icon):

What I need in that case is to have an “e-mail” icon instead of only the e-mail text. The current SelectOneMenu allows me to have an icon + text when the SelectOneMenu is expanded.

Do let me know if I was able to explain my case for you.

Thank you

[stolp]

I also have been missing icon support for selectOneMenu in the past. As a workaround I use a menuButton instead, but results are visually not fully convincing as seen in below example (Unable to place an icon in the displayed text, unable to give icons a color). The icon on the left side has been placed there as a seperate entity. I skipped selectOneMenu completely mostly for aesthetic reasons.

To get back to the original proposal: I am not convinced as well with the proposed solution. I think the main problem is here, that the column-based solution for icons in the showcase is more of a hack than a real solution to start with.

Most other components have a clear interface for handling icons, but selectOneMenu does not. The culprit lies in the use of f:selectItem for the menu model, which does not have a way to specify an icon alongside the label and value.

Two possible solutions come to mind here:

1. Replace the f:selectItem(s) with primefaces counterparts which allow additional settings for icons
2. Introduce an iconFactory attribute (naming could be better I think) pointing via el to a server side method which converts a single SelectItem to an icon string.

Additionally other common icon related attributes (iconPos, iconOnly etc.) should be added as well.

I personally would go in favor of the second solution.

What do you think?