Set custom icons for select-options in Tile feature to display feature with style=icon

[Wolly300]

Hello together,

I have the following use case:

Through the HACS I added the HA-wattpilot integration to monitor and control our wallbox.

Some of the entities have the type select. When I display these entities in a Tile, I can add the feature to change, e.g.: the charging mode.

But, like in these two blog articles (Tile card and Features). I want to display this select dropdown field with style=icon to have a button slider/selector/switch (whatever you want to call it) like in all the samples:

Unfortunately, there is no support for feature type select-options to display this kind of style.
To solve this problem, it would be a great implementation to set the icons right here in the tile:

type: tile
entity: select.wattpilot_links_charging_mode
features:
  - type: select-options
    options:
      - Default
        Icon: ...
      - Next Trip
        Icon: ...
      - Eco
        Icon: ...
grid_options:
  columns: 12
  rows: 2

[CalamarBicefalo]

This capability plus the tile card supporting it would be really useful!

[murtoz]

I love this. I was bodging something very similar together by making a button entity for each select option but it is clunky and requires lots of duplication.
Big advantage to having the options laid out like this is that it is now a single click/tap to change this select instead of two. May not sound like much but the UX is way better for me this way.

[CalamarBicefalo]

yeah, same, I did some code-gen script that create both selects and switches (with an icon) out of a select, but it is unnecessarily complex. And I do believe icon support got dramatically improved in a previous release a few months ago, that I'm hoping makes option-specific icons reasonably easy?

[amwoone]

Honestly I would actually appreciate the implementation of this feature very much. I tried to create an alarm card style of menu for my Home Mode with counter toggle action via input select and automations, but unfortunately it does not let me change the tile style from dropdown to icon like it does for example with hvac style tile card. I was quite suprised that there is no option for this style of menu.

[BBE-FR]

If you need to define your own feature for a tile card, you can use this available with HACS:
https://github.com/Nerwyn/service-call-tile-feature

This include selectors like you need plus many more. Now available with Graphical interface.

This does not remove the fact that it would be very useful to have something equivalent in the core, which I support and already asked for !

[murtoz]

From a quick scan this would still require me to define a button entity for each select option tho, right?

[BBE-FR]

You can define these custom features only with cards accepting features, thus mainly tiles plus some other (lock for example).

You can define several features, you define them row by row, then edit the row one by one.

For a selector, first you define one row as a selector then you add one by one the states you want to display of this selector (you can display only a few mode and not all if you want, but you add them one by one, yes).

One example with associated code (not mode selector but the various groups of my echo speakers) :

Below the custom tile, the tile with only the input-select to compare behaviour:

With this you modify the input text, select (with selector) the group you want and clic on icon to play the music you want on the group you selected (via a script), all with one tile card.

type: tile
features_position: bottom
vertical: false
entity: input_text.alexa_text_input
grid_options:
  columns: 12
  rows: 1
icon: mdi:play
icon_tap_action:
  action: perform-action
  perform_action: script.toggle
  target:
    entity_id: script.play_music_on_group
name: Quelle musique ?
features:
  - type: custom:service-call
    entries:
      - type: selector
        entity_id: input_select.groupes_d_enceintes
        options:
          - entity_id: input_select.groupes_d_enceintes
            option: Partout
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Partout
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Partout
            icon: ""
          - entity_id: input_select.groupes_d_enceintes
            option: Salon et cuisine
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Salon et cuisine
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Salon et cuisine
          - entity_id: input_select.groupes_d_enceintes
            option: Rez de chaussée
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Rez de chaussée
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Rez de Chaussée
          - entity_id: input_select.groupes_d_enceintes
            option: Etage
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Etage
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Etage

[murtoz]

Also to add I would like this feature not just for selects but also input and template selects, please.

[BBE-FR]

I fully support this kind of "generic feature" request:
#19930
#24550