How to center icon inside a TabButton?

[cris-m]

I have try to center icon inside TabButton. The other problem is in iPhone 13, there is a space under the TabHostView.Tabs. I tried to center icon of a BottomTabItem horizontally but it didn't work. Here is my output

In android the circular button is a bit wired. Here is a design

Here is my TabHostView.Tabs code:

 <tabs:TabHostView
                x:Name="TabHost"
                Grid.Row="1"
                TabType="Fixed"
                Orientation="Horizontal"
                BackgroundColor="{StaticResource SurfaceLight}"
                SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
            <tabs:TabHostView.Tabs>

                <tabs:BottomTabItem
                    IconImageSource="home.png"
                    Label="Home"
                    Style="{StaticResource BottomTab}"/>

                <tabs:BottomTabItem
                    IconImageSource="history.png"
                    Label="History"
                    Style="{StaticResource BottomTab}"/>

                <!--  Circle button  -->
                <tabs:TabButton
                    Style="{StaticResource BottomTabButton}"
                    IconImageSource="qrcode.png"
                    Scale="1.3"
                    TranslationY="-15"/>

                <tabs:BottomTabItem
                    IconImageSource="wallet.png"
                    Label="Account"
                    Style="{StaticResource BottomTab}"/>

                <tabs:BottomTabItem
                    IconImageSource="user.png"
                    Label="Profile"
                    Style="{StaticResource BottomTab}"/>

            </tabs:TabHostView.Tabs>
        </tabs:TabHostView>