How to change ShellContent icon programmatically?

Question

Problem:

I need to change the ShellContnet icon programmatically from the List that I get from the JSON file, all logic is done, but I can't change the icon when I open the flyout menu.

Screenshots:

Answer 1

You can refer to docs about Shell Flyout. I found three solutions from the docs:

1. Try Binding the Icon to the ViewModel Property. The ViewModel Should be set to Binding Context of the ShellPage.
2. Customize the appearance of FlyoutItem by setting the Shell.ItemTemplate attached property to a DataTemplate:

 <Shell.ItemTemplate>
 <DataTemplate>
 <Grid ColumnDefinitions="0.2*,0.8*">
 <Image Source="{Binding FlyoutIcon}"
   Margin="5" HeightRequest="45" />
  <Label Grid.Column="1" Text="{Binding Title}"
     FontAttributes="Italic"
   VerticalTextAlignment="Center" />
    </Grid>
    </DataTemplate>
   </Shell.ItemTemplate>

3. Replace flyout content with own content by setting the Shell.FlyoutContent bindable property to an object:

 <Shell.FlyoutContent>
<CollectionView BindingContext="{x:Reference
shell}"    IsGrouped="True" ItemsSource="{Binding FlyoutItems}"> 
<CollectionView.ItemTemplate> 
<DataTemplate>  
<Label Text="{Binding
Title}" TextColor="White" FontSize="18" /> 
</DataTemplate> 
</CollectionView.ItemTemplate>  
</CollectionView> 
</Shell.FlyoutContent>