Question: Using an SVG with Shell's Tab Icon?

[kieronlanning]

Description

How can I set an SVG to the new Shell's Tab Icon property?

Screenshots

Reproduction Link / Code

    <TabBar>
        <Tab Title="Home">
            <Tab.Icon>
                <ffimageloadingsvg:SvgCachedImage Source="home.svg" />
            </Tab.Icon>
            <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>
        <Tab Title="About" Icon="tab_about.png">
            <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
        </Tab>
    </TabBar>

[daniel-luberda]

SvgImageSource.FromFile etc

[kieronlanning]

@daniel-luberda Thanks! I'm new to Xamarin... is that something I do in Xaml or code?

[kieronlanning]

Updated to bind to a view model now, but the icon doesn't appear.

I've also included the same icon on the page (as content) using the same code, and it's fine.

Tried a variety of things to make sure it's picking up the correct file and content, and it's fine on page, but not in the Tab Icon.

[candidodmv]

@kieronlanning any updates about this isseu? The icon doesn't appear for me too. Thanks!

[kieronlanning]

@candidodmv It's on the Xamarin backlog: https://github.com/xamarin/Xamarin.Forms/issues/6477

[Dresel]

I did some research:

Android is using IImageViewHandler and IImageSourceHandler - FFImageLoading implements both, but FFImageLoadingImageSourceHandler is ignored and cannot be registered. Shell tabs are relying on IImageSourceHandler, that's why no icons are displayed.

This issue could be resolved by simply adding an InitImageSourceHandler routine for Android, similar to iOS.

@daniel-luberda I would go for a PR if that makes sense for you.

[Denn1Ro]

Any updates?

[elaurentin]

using FFImageLoading.Forms.Platform;
using FFImageLoading.Svg.Forms;

// FFImageLoading.Forms.Platform
namespace Application.Droid
{
    public static class SvgImageRegister
    {
        public static void Init()
        {
            Xamarin.Forms.Internals.Registrar.Registered.Register(typeof(SvgImageSource), typeof(FFImageLoadingImageSourceHandler));
        }
    }
}

[tothattila97]

Is there any update on this issue, when will be fixed? Thanks in advance! @daniel-luberda

[NightOwlCoder]

@candidodmv It's on the Xamarin backlog: xamarin/Xamarin.Forms#6477

Xamarin says it is an issue on FF side:

This is not a Xamarin Forms issue, FFImageLoading does not register IImageSourceHandler for Android (see comment).

from: https://github.com/xamarin/Xamarin.Forms/issues/6477#issuecomment-545823706

[AmarildoLena]

you can use a tabbed page like this: https://docs.microsoft.com/it-it/samples/xamarin/xamarin-forms-samples/navigation-tabbedpagewithsvgtabicons/

[harris1717]

you can use a tabbed page like this: https://docs.microsoft.com/it-it/samples/xamarin/xamarin-forms-samples/navigation-tabbedpagewithsvgtabicons/

This is not using Xamarin Shell

[elaurentin]

See my post on May 22nd, same as @Dresel already pointed out. Call SvgImageRegister.Init()

[taublast]

you can use a tabbed page like this: https://docs.microsoft.com/it-it/samples/xamarin/xamarin-forms-samples/navigation-tabbedpagewithsvgtabicons/

This is not using Xamarin

If still struggling use a workaround to draw with skiasharp: https://github.com/taublast/xamarinshell