Xamarin.Forms - How to use SvgImageSource with Button ?

Hi, Perhaps I’m missing something obivous, but I just couldn’t find a way to use SvgImageSource as ImageSource for Button. I’ve managed to use it for ImageButton using the examples provided, but ImageButton doesn’t support Visual Material yet and behaves differently.

Ideally, I would like to do something like the following. Is it possible ?

<Button Padding="20"
        BackgroundColor="Blue"
        CornerRadius="25"
        HeightRequest="50"
        WidthRequest="50">
  <Button.ImageSource>
    <ffimagesvg:SvgImageSource Source="resource://022-oil-gauge.svg"/>
  </Button.ImageSource>
</Button>

I’m using VS 2019 16.7.0 Pro, latest Xamarin.Forms, FFImageLoading and targeting API Level 29.

[HakanCelikMK1]

@timvandenhof Sorry, I haven’t been able to find a solution to this. But I’ve achieved what I wanted in a different way.

I’m using Visual Material. Not all visual elements support it yet. I especially like the visual feedback it gives.

Currently I’m using @AndreiMisiukevich 's TouchEffect library TouchEffect to add that effect to almost anything. For example it provides a nice way to catch taps on items in a CollectionView with visual feedback, I highly recommend it. It supports Android, iOS, Mac and UWP, but I only used it on Android yet.

If you also like a nice drop shadow for your visual elements check out Sharpnado.Shadows by @roubachof

There is also a trick with Visual Studio. When you add an embedded resource to the NET Standard project, it doesn’t automatically give a logical name to the resource, which forces you to use the whole path. I do the following in the NET Standard project file.

VS
<EmbeddedResource Include="Resources\SVGs\Mod.svg"/>

I modify it like this, it's a PITA but at least it works :)

<EmbeddedResource Include="Resources\SVGs\Mod.svg">
  <LogicalName>Mod.svg</LogicalName>
</EmbeddedResource>

The following provides me with a nice circular button with an embedded SVG and I can also add a label to it very easly if necessary. If not, just remove the StackLayout.

<Frame
  Padding="0"
  touch:TouchEff.Command="{Binding ShowAlert}"
  touch:TouchEff.IsAvailable="True"
  touch:TouchEff.NativeAnimation="True"
  touch:TouchEff.NativeAnimationColor="#80FFFFFF"
  touch:TouchEff.PressedBackgroundColor="#000080"
  touch:TouchEff.RegularBackgroundColor="#000080"
  touch:TouchEff.ShouldMakeChildrenInputTransparent="False"
  CornerRadius="31"
  Visual="Default">
  <StackLayout>
    <ffimagesvg:SvgCachedImage
      Margin="6"
      Aspect="AspectFit"
      BackgroundColor="Transparent"
      HeightRequest="50"
      HorizontalOptions="Center"
      Source="resource://Mod.svg"
      VerticalOptions="Center"
      WidthRequest="50" />
  </StackLayout>
</Frame>

[themronion]

@timvandenhof i’ve decided to use resizetizerNT to load up all my svg’s - get them transformed to regular pngs and then use the images as usual in xamarin forms. Maybe this solution will fulfill your needs