How to compose icons in NavigationViewItem.Icon

[Balkoth]

I want to do something like this:

<NavigationViewItem x:Name="Test" Content="Hello">
  <NavigationViewItem.Icon>
    <!-- Single icon works fine, but HOW TO COMPOSE TWO OR MORE ICONS HERE? -->
    <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xe8ca;" />
  </NavigationViewItem.Icon>
</NavigationViewItem>

[castorix]

A workaround can be to call RenderTargetBitmap of a grid with the 2 icons, convert it to BitmapImage and set it as source of ImageIcon (instead of FontIcon)

I increased the size of Viewbox of "Content 1" to 32x32 otherwise it is too small like in "Content 2":

[Balkoth]

Thanks, i got it to show by doing it like this:

public static async Task ConvertGridToImage(Grid grid, ImageIcon imageIcon)
{
  RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
  await renderTargetBitmap.RenderAsync(grid);

  imageIcon.Source = renderTargetBitmap;
}

Now the question is can we create a control ComposedIcon that is accepted by NavigationViewItem.Icon along the lines of:

<NavigationViewItem x:Name="Test" Content="Hello">
  <NavigationViewItem.Icon>
    <ComposedIcon>
      <Grid> <!-- If possible also eliminate the grid here -->
        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xEB52;" Foreground="#C72335" />
        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xEB51;" />
      </Grid>
    </ComposedIcon>
  </NavigationViewItem.Icon>
</NavigationViewItem>

Any ideas if this is possible?

[castorix]

You can also modify the template copied from generic.xaml
<Style TargetType="NavigationViewItem" >
(put inside App.xaml)
in particular the <Viewbox x:Name="IconBox"
(I tested with the grid with the 2 FontIcons, by replacing ContentPresenter x:Name="Icon" )

[Balkoth]

Ah yes, that could be an opportunity. I see what i can come up with, or if it's just not worth the hustle.