Appbar Button icon image seems not correct in Window 8.1

Question

I created an appbar button using BitMapIcon. Below is the code

<AppBarButton HorizontalAlignment="Stretch" Label="AppBarButton" VerticalAlignment="Stretch" Background="White" Foreground="White">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="Assets/work.png"/>
    </AppBarButton.Icon>
</AppBarButton>

Where work.png is the button image. But appbar button image seems different that of the original work image. See the Images

The second image is the original icon of 40 x 40 size image & i put background as black for display purpose [work.png].
What to do for displaying the button icon as correct as in the original icon ? Or what is the reason for this mis match?

Will the appbar button allow semi-transparent icon images?

Answer 1

I had a similar problem and found setting the height and width to that of the png stopped it.
Note: 40x40 seems too large for the circle.

<AppBarButton HorizontalAlignment="Stretch" Label="AppBarButton" VerticalAlignment="Stretch" Background="White" Foreground="White">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="Assets/work.png" Height="20" Width="20"/>
    </AppBarButton.Icon>
</AppBarButton>