InfoBadge icon is not visible

[nxtn-staged]

Describe the bug

The icon in an icon info badge is not visible in WinUI 3.

Steps to reproduce the bug

<InfoBadge HorizontalAlignment="Center" VerticalAlignment="Center">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

Expected behavior

No response

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.2.3: 1.2.230118.102

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[Jay-o-Way]

I'm thinking it's because SymbolIcon uses code points in the range of E1**, where Sync=E117. These have been deprecated for years. See also MicrosoftDocs/winrt-api#2363 (or #8375)

[greatoceansoftware]

Any update on this? I would really like to use infobadges with icons.

[ranjeshj]

resolving as dup of #8385

[Diegorro98]

FontIcon is also not working. See WinUI3 Gallery InfoBadge Section (winui3gallery://item/InfoBadge) "Placing an InfoBadge Inside Another Control", the InfoBadge element has a custom icon, but it is not visible.

[Diegorro98]

@Jay-o-Way no it isn't only in the app, it is happening to me in the app I'm building. I used that example to easily show the issue.
But you can go ahead and build an app with the following element:

<InfoBadge Style="{StaticResource CautionIconInfoBadgeStyle}"/>

The exclamation icon is missing

Or this example from Microsoft Learn:

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

The icon is also missing...

[greatoceansoftware]

Any update on this?

[ranjeshj]

I can repro this with latest 1.5 release. Reopening.

[SjVer]

Encountered the same issue. It's not just the SymbolIconSource that doesn't work with the InfoBadge, but all other icon sources too.

This snippet should be fine:

<InfoBadge Style="{ThemeResource SuccessIconInfoBadgeStyle}">
    <InfoBadge.IconSource>
        <FontIconSource Glyph="&#xE8FB;"/>
    </InfoBadge.IconSource>
</InfoBadge>

But it just shows a weird green squashed-looking circle:

Hope this gets fixed ASAP.

[leohu1]

I have the same problem

[castorix]

Encountered the same issue. It's not just the SymbolIconSource that doesn't work with the InfoBadge, but all other icon sources too.

It works (at least on my 1.42 version) by setting the font.
For example, with Red Heart glyph

        <InfoBadge Style="{ThemeResource SuccessIconInfoBadgeStyle}" Width="42" MinHeight="42">
            <InfoBadge.IconSource>               
                <FontIconSource FontFamily="Segoe UI Emoji" Glyph="&#x2764;"/>
            </InfoBadge.IconSource>
        </InfoBadge>

I get :

[Jay-o-Way]

Yeah but a font shouldn't be hardcoded. At all.