PathIcon are not supported. Use BitmapIcon instead with UriSource

[igiona]

In a Uno sample application create with the Uno Template Wizard, I imported the main page from Figma.
In Figma I used the page template, and simply exported it as XAML.
The plugin generated the menu icons as follow:

  <Page.Resources>
    <x:String x:Key="Icon_Bluetooth">F1 M 12.709999084472656 5.710000038146973 L 7 0 L 6 0 L 6 7.590000152587891 L 1.4099998474121094 3 L 0 4.409999847412109 L 5.590000152587891 10 L 0 15.59000015258789 L 1.4099998474121094 17 L 6 12.40999984741211 L 6 20 L 7 20 L 12.709999084472656 14.290000915527344 L 8.40999984741211 10 L 12.709999084472656 5.710000038146973 Z M 8 3.8299999237060547 L 9.880000114440918 5.710000038146973 L 8 7.590000152587891 L 8 3.8299999237060547 Z M 9.880000114440918 14.290000915527344 L 8 16.170000076293945 L 8 12.40999984741211 L 9.880000114440918 14.290000915527344 L 9.880000114440918 14.290000915527344 Z</x:String>
    <x:String x:Key="Icon_Filter_List_Alt">F1 M 0.25 1.6599998474121094 C 0.3500000014901161 1.7899998426437378 5.989999771118164 8.989999771118164 5.989999771118164 8.989999771118164 L 5.989999771118164 15 C 5.989999771118164 15.550000011920929 6.439999997615814 16 7 16 L 9.010000228881836 16 C 9.560000240802765 16 10.020000457763672 15.550000011920929 10.020000457763672 15 L 10.020000457763672 8.979999542236328 C 10.020000457763672 8.979999542236328 15.510000467300415 1.9599998593330383 15.770000457763672 1.6399998664855957 C 16.03000044822693 1.319999873638153 16 1 16 1 C 16 0.44999998807907104 15.54999977350235 0 14.989999771118164 0 L 1.010000228881836 0 C 0.4000002145767212 0 0 0.48000001907348633 0 1 C 0 1.2000000029802322 0.06000000238418579 1.4399998486042023 0.25 1.6599998474121094 Z</x:String>
    <x:String x:Key="Icon_Menu">F1 M 0 12 L 18 12 L 18 10 L 0 10 L 0 12 Z M 0 7 L 18 7 L 18 5 L 0 5 L 0 7 Z M 0 0 L 0 2 L 18 2 L 18 0 L 0 0 Z</x:String>

  </Page.Resources>

[...]

      <utu:NavigationBar HorizontalContentAlignment="Left" Content="Title" utu:AutoLayout.CounterAlignment="Stretch" x:Uid="MainPage_NavigationBar"
                          MainCommandMode="Action"
                         >
        <utu:NavigationBar.MainCommand>
          <AppBarButton>
            <AppBarButton.Icon>
              <PathIcon Data="{StaticResource Icon_Menu}" Foreground="{ThemeResource OnSurfaceBrush}" />
            </AppBarButton.Icon>
            <AppBarButton.Flyout>
              <local:NavFlyout />
            </AppBarButton.Flyout>
          </AppBarButton>
        </utu:NavigationBar.MainCommand>
        <utu:NavigationBar.PrimaryCommands>
          <AppBarButton>
            <AppBarButton.Icon>
              <PathIcon Data="{StaticResource Icon_Filter_List_Alt}" Foreground="{ThemeResource OnSurfaceBrush}" />
            </AppBarButton.Icon>
          </AppBarButton>
          <AppBarButton Command="{Binding Connect}" >
            <AppBarButton.Icon>
              <PathIcon Data="{StaticResource Icon_Bluetooth}" Foreground="{ThemeResource OnSurfaceBrush}" />
            </AppBarButton.Icon>
          </AppBarButton>
        </utu:NavigationBar.PrimaryCommands>
      </utu:NavigationBar>

On Windows, it behaves as expected:

On Android, the icon in the navigation bar are not displayed and I get a bunch of error in the debug console:

[DOTNET] warn: Uno.Toolkit.UI.AppBarButtonRenderer[0]
[DOTNET]       PathIcon are not supported. Use BitmapIcon instead with UriSource.

I somewhat can't believe that this is the intended behavior, the Figma plugin would be very limited if it would (not) work like that...
what am I missing here?

[sasakrsmanovic]

@NVLudwig or @carldebilly be able to answer

[jeromelaban]

AppBarButton on Android does not support SVGs as sources, it is a limitation of the native Android app bar. You can use resizetizer to create images from SVG instead.

[igiona]

Thank you @sasakrsmanovic & @jeromelaban, I eventually did resolve the problem with the resizetizer, I find a bit weird that the Figma plugin produces "invalid" code for one of the mobile platforms of Uno...
I really like the plugin, but with such limitation the user experience it's quite poor because merging the XAML at each design iteration is going to be painful if all icons require manual re-work.

It would be nice if the plugin would provide the SVG to be exported and that the Uri gets set to the PNG instead of the embedded PathIcons for seamless integration

[NVLudwig]

That's a fair point @igiona and good feedback for Navigationbar VS Android. I'll log it on our side and discuss it further with the plugin team.