title: How to load a svg image into tab header in Xamarin
body: <p>I'm building a simple application which has 3 tabs, every tab have an icon and a text.
  The sample project that I'm basing my code exists here:</p>
  <p><a href="https://github.com/vladpoint/TabbedPageWithNavigationPage" rel="nofollow noreferrer">link</a></p>
  <p>The only problem that I found with it, it uses pixilated images for the tab headers which I would like to change to SVG resource files.</p>
  <p>I added a FFImageLoading library and added the svg support from here</p>
  <p><a href="https://github.com/luberda-molinet/FFImageLoading/wiki/SVG-support" rel="nofollow noreferrer">link</a></p>
  <p>I managed to add an image to one of the tab content pages but I don't see the svg image that I'm trying to see in the header.</p>
  <p>This is my code so far:</p>
  <p><strong>TodayPage.xaml.cs</strong></p>
  <pre><code>public partial class TodayPage : ContentPage
      {
          public TodayPage()
          {
              InitializeComponent();
              InitializeComponent();
              // IconImageSource = &quot;today.png&quot;; &lt;-- this will show the pixilated image
              IconImageSource = SvgImageSource.FromResource(&quot;today.svg&quot;); //&lt;--not working
              Title = &quot;Today&quot;;
          }
      }
  </code></pre>
  <p><strong>TodayPage.xaml</strong></p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;ContentPage xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot;
               xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
               xmlns:forms=&quot;clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms&quot;
               x:Class=&quot;TabsApp.TodayPage&quot;&gt;
      &lt;ContentPage.Content&gt;
          &lt;StackLayout&gt;
              &lt;forms:SvgCachedImage WidthRequest=&quot;200&quot; HeightRequest=&quot;200&quot; Source=&quot;resource://TabsApp.Resources.today.svg&quot;/&gt;
              &lt;Label Text=&quot;Today's appointments go here going&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;CenterAndExpand&quot; /&gt;
          &lt;/StackLayout&gt;
      &lt;/ContentPage.Content&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  <p><strong>MainPage.xaml</strong></p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  &lt;TabbedPage xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot; 
              xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot; 
              xmlns:local=&quot;clr-namespace:TabsApp;assembly=TabsApp&quot; 
              x:Class=&quot;TabsApp.MainPage&quot;&gt;
      &lt;local:TodayPage /&gt;
      &lt;NavigationPage Title=&quot;Schedule&quot; IconImageSource=&quot;schedule.png&quot;&gt;
          &lt;x:Arguments&gt;
              &lt;local:SchedulePage /&gt;
          &lt;/x:Arguments&gt;
      &lt;/NavigationPage&gt;
      &lt;local:SettingPage /&gt;
  &lt;/TabbedPage&gt;
  </code></pre>
  <p>Thank you</p>
  <p><strong>Edit</strong></p>
  <p>Thanks to Leon I managed to load svg file in Android.
  I'm still struggling to load svg file in iOS.</p>
  <p>I managed to create a custom tab renderer in iOS here is the code:</p>
  <pre><code>[assembly: ExportRenderer(typeof(TabPage), typeof(PageTabRenderer))]
      namespace TabsApp.iOS
  {
      [Foundation.Preserve(AllMembers = true)]
      public class PageTabRenderer : TabbedRenderer
      {
          protected override async Task&lt;Tuple&lt;UIImage, UIImage&gt;&gt; GetIcon(Page page)
          {
              var navigationPage = page as NavigationPage;
              if (navigationPage != null &amp;&amp; navigationPage.CurrentPage != null)
              {
                  var imageSource = navigationPage.IconImageSource == null ? navigationPage.CurrentPage.IconImageSource : navigationPage.IconImageSource;
                  return await this.GetNativeUIImage(imageSource);
              }
  
              return await this.GetNativeUIImage(page.IconImageSource);
          }
  
          private async Task&lt;Tuple&lt;UIImage, UIImage&gt;&gt; GetNativeUIImage(ImageSource imageSource)
          {
              var imageicon = await GetNativeImageAsync(imageSource);
              return new Tuple&lt;UIImage, UIImage&gt;(imageicon, null);
          }
  
          private async Task&lt;UIImage&gt; GetNativeImageAsync(ImageSource imageSource)
          {
              if (imageSource is FileImageSource fileImage &amp;&amp; fileImage.File.Contains(&quot;.svg&quot;))
              {
                  var imageicon = await ImageService.Instance.LoadFile(fileImage.File).WithCustomDataResolver(new SvgDataResolver(15, 15, true)).AsUIImageAsync();
                  return imageicon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
              }
              
              else
              {
                  var imageicon = await GetUIImage(imageSource);
                  return imageicon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
              }
          }
          
          private Task&lt;UIImage&gt; GetUIImage(ImageSource imageSource)
          {
              var handler = GetImageSourceHandler(imageSource);
              return handler.LoadImageAsync(imageSource);
          }
  
          private static IImageSourceHandler GetImageSourceHandler(ImageSource source)
          {
              IImageSourceHandler sourceHandler = null;
              if (source is UriImageSource)
                  sourceHandler = new ImageLoaderSourceHandler();
              else if (source is FileImageSource)
                  sourceHandler = new FileImageSourceHandler();
              else if (source is StreamImageSource)
                  sourceHandler = new StreamImagesourceHandler();
              else if (source is FontImageSource)
                  sourceHandler = new FontImageSourceHandler();
  
              return sourceHandler;
          }
        
          
          
      }
      
  }
  </code></pre>
  <p>this is my mainpage.xaml</p>
  <pre><code>&lt;TabbedPage xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot; 
              xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot; 
              xmlns:local=&quot;clr-namespace:TabsApp;assembly=TabsApp&quot; 
              x:Class=&quot;TabsApp.MainPage&quot;&gt;
      &lt;local:TodayPage /&gt;
      &lt;NavigationPage Title=&quot;Schedule&quot; IconImageSource=&quot;today1.svg&quot;&gt;
          &lt;x:Arguments&gt;
              &lt;local:SchedulePage /&gt;
          &lt;/x:Arguments&gt;
      &lt;/NavigationPage&gt;
      &lt;local:SettingPage /&gt;
  &lt;/TabbedPage&gt; 
  </code></pre>
  <p>I also copied TabPage class but I don't see the svg icons loading. I tried to debug it and it seems the GetIcon is never called.</p>
  <p>****** <strong>Edit 2</strong> *******</p>
  <p>After more playing with the code here and there I managed to figure it out. If someone will be interested in implementing similar design</p>
  <p><strong>main.xaml</strong></p>
  <pre><code>    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
  
  &lt;custom:TabPage xmlns=&quot;http://xamarin.com/schemas/2014/forms&quot;
                  xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
                  xmlns:local=&quot;clr-namespace:TabsApp;assembly=TabsApp&quot;
                  xmlns:custom=&quot;clr-namespace:TabsApp.custom;assembly=TabsApp&quot;
                  x:Class=&quot;TabsApp.MainPage&quot;
                  xmlns:android=&quot;clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core&quot;
                  android:TabbedPage.ToolbarPlacement=&quot;Bottom&quot;
                  android:TabbedPage.IsSmoothScrollEnabled=&quot;True&quot;
                  android:TabbedPage.IsSwipePagingEnabled=&quot;False&quot;
                  xmlns:iOS=&quot;clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core&quot;
                  xmlns:ffimageloadingsvg=&quot;clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms&quot;
                  iOS:Page.UseSafeArea=&quot;true&quot; NavigationPage.HasNavigationBar=&quot;False&quot;
                  BarTextColor=&quot;{DynamicResource SecondaryTextColor}&quot; UnselectedTabColor=&quot;Black&quot; SelectedTabColor=&quot;Blue&quot;
                  NavigationPage.HasBackButton=&quot;False&quot;&gt;
     
     
              &lt;local:TodayPage IconImageSource=&quot;{x:OnPlatform Android=ic_today, iOS=today-24px.svg}&quot;/&gt;
     
      
     
              &lt;local:SchedulePage IconImageSource=&quot;{x:OnPlatform Android=ic_schedule, iOS=schedule-24px.svg}&quot;/&gt;
        
    
              &lt;local:SettingPage IconImageSource=&quot;{x:OnPlatform Android=ic_settings, iOS=settings-24px.svg}&quot;/&gt;
       
      
  &lt;/custom:TabPage&gt;
  </code></pre>
  <p>It's important to note two things: IconImageSource will be changed depending on the platform, SelectedTabColor will be the tint color for both Android and iOS when a tab item is selected.</p>
  <p>you need to convert the svg files to drawable vector files just like Lean wrote and put them in /drawable folder.</p>
  <p>As for iOS you will need to add a custom tab renderer this is the one I used:</p>
  <pre><code>[assembly: ExportRenderer(typeof(TabPage), typeof(PageTabRenderer))]
  namespace TabsApp.iOS
  {
      [Foundation.Preserve(AllMembers = true)]
      public class PageTabRenderer : TabbedRenderer
      {
          readonly nfloat imageYOffset = 7.0f;
  
          public override void ViewWillAppear(bool animated)
          {
              base.ViewWillAppear(animated);
  
              if (TabBar.Items != null)
              {
                  foreach (var item in TabBar.Items)
                  {
                      item.Title = null;
                      item.ImageInsets = new UIEdgeInsets(imageYOffset, 0, -imageYOffset, 0);
                  }
              }
          }
          
          protected override async Task&lt;Tuple&lt;UIImage, UIImage&gt;&gt; GetIcon(Page page)
          {
              var navigationPage = page as NavigationPage;
              if (navigationPage != null &amp;&amp; navigationPage.CurrentPage != null)
              {
                  var imageSource = navigationPage.IconImageSource == null ? navigationPage.CurrentPage.IconImageSource : navigationPage.IconImageSource;
                  return await this.GetNativeUIImage(imageSource);
              }
  
              return await this.GetNativeUIImage(page.IconImageSource);
          }
  
          private async Task&lt;Tuple&lt;UIImage, UIImage&gt;&gt; GetNativeUIImage(ImageSource imageSource)
          {
              var imageicon = await GetNativeImageAsync(imageSource);
              return new Tuple&lt;UIImage, UIImage&gt;(imageicon, null);
          }
  
          private async Task&lt;UIImage&gt; GetNativeImageAsync(ImageSource imageSource)
          {
              if (imageSource is FileImageSource fileImage &amp;&amp; fileImage.File.Contains(&quot;.svg&quot;))
              {
                  var imageicon = await ImageService.Instance.LoadFile(fileImage.File).WithCustomDataResolver(new SvgDataResolver(15, 15, true)).AsUIImageAsync();
                  return imageicon.ImageWithRenderingMode(UIImageRenderingMode.Automatic);
              }
              
              else
              {
                  var imageicon = await GetUIImage(imageSource);
                  return imageicon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
              }
          }
          
          private Task&lt;UIImage&gt; GetUIImage(ImageSource imageSource)
          {
              var handler = GetImageSourceHandler(imageSource);
              return handler.LoadImageAsync(imageSource);
          }
  
          private static IImageSourceHandler GetImageSourceHandler(ImageSource source)
          {
              IImageSourceHandler sourceHandler = null;
              if (source is UriImageSource)
                  sourceHandler = new ImageLoaderSourceHandler();
              else if (source is FileImageSource)
                  sourceHandler = new FileImageSourceHandler();
              else if (source is StreamImageSource)
                  sourceHandler = new StreamImagesourceHandler();
              else if (source is FontImageSource)
                  sourceHandler = new FontImageSourceHandler();
  
              return sourceHandler;
          }
        
          
          
      }
      
  }
  </code></pre>
  <p>Put all the *.svg files in the /Resources folder in *.iOS folder and that's it.</p>