How to embed an icon in an option for a FluentSelect programmatically?

[AndyEdmonds]

The examples for The FluentSelect at https://brave-cliff-0c0c93310.azurestaticapps.net/Select show that you can add an icon to an option declaratively:
<FluentSelect ValueChanged="@(e => selectValue2 = e)" TOption="string"> <FluentOption Value="1"> Search <FluentIcon Name="@FluentIcons.Search" Slot="start" Size="IconSize.Size20" Color="Color.Neutral" /> </FluentOption>

Programmatically we are stuck with using just Option. This has no way to embed an icon.
If you try creating a list of FluentOption classes warnings are created about accessing Value etc outside of the component.

How should this be done?

[vnbaaij]

Good question. I don't think there is a way to do this yet. Creating a list of <FluentOption>s is not the right way. The warnings you get then are to be expected.

What I could do is add a new Icon property to the Option<> class. The type of the property would be a Tuple with the needed
icon parameters, i.e.:

   public (string Name, IconSize? Size, IconVariant? Variant, Color? Color, string? Slot) Icon { get; set; }

At the place you are generating your Option collection you would then do something like this to add an option with an icon.:

// The 'null' values instruct the code to use the FluentIcon's default values for those parameters
{ new Option<string> { Value = "9", Text = "Nine", Icon = (@FluentIcons.AppsList,null,null, Color.Neutral, "start" ) } },

It would then get rendered like this:

Makes sense?

[adeyinkaroyal]

Hi @vnbaaij, this would be awesome.

[vnbaaij]

The functionality I described is already in. See https://www.fluentui-blazor.net/Select#fromalistofoptiontit