How to change icon color in Xamarin.Forms xaml page?

Question

Currently, I am developing a Xamarin.Forms PCL application for Android and iOS. In one of my pages I define a ListView. The template for the ListView.ItemTemplate displays an icon using <Image Source="some_Icon.png" />. The icon displays as expected (black) but I have not found a way to set the color.

I would like to colorize this icon based on logic in my ViewModel.

I have searched for answers both through the Documentation and StackOverlflow to no avail.

1. Is there a better way to display and style icons from a Xamarin.Forms PCL project?

2. Does Xamarin.Forms require a set of resource/image files for every possible color I might use?

Answer 1

I solved my problem with Iconize for Xamarin.Forms. I implemented my solution based off the Iconize sample code below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
         x:Class="Iconize.FormsSample.Page1"
         Title="{Binding FontFamily}">

  <ContentPage.ToolbarItems>
    <iconize:IconToolbarItem Command="{Binding ModalTestCommand}" Icon="fa-500px" />
    <iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IconColor="Red" />
    <iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IsVisible="{Binding VisibleTest}" />
  </ContentPage.ToolbarItems>
  <ListView CachingStrategy="RecycleElement" ItemsSource="{Binding Characters}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Orientation="Horizontal">
            <iconize:IconImage HeightRequest="20" Icon="{Binding Key}" IconColor="Blue" WidthRequest="20" />
            <iconize:IconImage HeightRequest="20" Icon="{Binding Key}" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
            <iconize:IconButton FontSize="20" Text="{Binding Key}" TextColor="Red" WidthRequest="48" />
            <iconize:IconLabel FontSize="20" Text="{Binding Key}" TextColor="Green" VerticalTextAlignment="Center" />
            <Label Text="{Binding Key}" VerticalTextAlignment="Center" />
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

In my case, I simply had to replace my original <Image .../> element and replace it with <iconize:IconImage HeightRequest="20" Icon="fa-circle" IconColor="{Binding CircleColor}" WidthRequest="20" />.

In my ViewModel, I added the CircleColor property to set the icon color as needed based on my logic.