Iconize with Xamarin Forms (on Android)

Question

I have not been able to get Iconize to work at all. I created a small test project based on the code in this thread (among other places):

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

In App.xaml.cs:

public App()
{
    InitializeComponent();

    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.MaterialDesignIconsModule());
    MainPage = new MainPage();
}

In MainActivity.cs:

protected override void OnCreate(Bundle savedInstanceState)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    Plugin.Iconize.Iconize.Init(Resource.Id.toolbar, Resource.Id.sliding_tabs);

    LoadApplication(new App());
}

and MainPage.xaml:

<?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:local="clr-namespace:IconizeTest"
             xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize"
             x:Class="IconizeTest.MainPage">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <iconize:IconImage HeightRequest="20" Icon="mdi-bus-double-decker" IconColor="Blue" WidthRequest="20" />
            <iconize:IconImage HeightRequest="20" Icon="mdi-bus-double-decker" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
            <iconize:IconButton FontSize="20" Text="mdi-bus-double-decker" TextColor="Red" WidthRequest="48" />
            <iconize:IconLabel FontSize="20" Text="mdi-bus-double-decker" TextColor="Green" VerticalTextAlignment="Center" />
            <Label Text="mdi-bus-double-decker" VerticalTextAlignment="Center" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Here's a picture of what the output looks like in an emulator (looks the same on my test device...):

I like the idea of using iconize, it will tremendously reduce the amount of time I take dorking with icons. I just can't get it to work. Can anyone tell me what I'm doing wrong?

Thanks! -Karen

Answer 1

Font icons can be used directly in Label.

Image and ImageButton supports defining font icons in FontImageSource, see example using Iconize Material Design Icons below:

<ContentPage ...
             xmlns:fonts="clr-namespace:Fonts" 
             ...
             >
<ContentPage.Resources>
  <ResourceDictionary>
    <OnPlatform x:Key="MaterialDesignIcons" x:TypeArguments="x:String">
        <On Platform="iOS" Value="Material Design Icons" />
        <On Platform="Android" Value="iconize-materialdesignicons.ttf#Material Design Icons" />
        <On Platform="UWP" Value="Assets/Fonts/iconize-materialdesignicons.ttf#Material Design Icons" />
    </OnPlatform>
  </ResourceDictionary>
</ContentPage.Resources>
...
<Image BackgroundColor="LightGray">
    <Image.Source>
        <FontImageSource Glyph="{x:Static fonts:MaterialDesign.access_point}"
                         FontFamily="{StaticResource MaterialDesignIcons}" 
                         Color="Blue" Size="10" />
    </Image.Source>
</Image>
<ImageButton BackgroundColor="LightGray">
    <ImageButton.Source>
        <FontImageSource Glyph="{x:Static fonts:MaterialDesign.bus_double_decker}"
                         FontFamily="{StaticResource MaterialDesignIcons}" 
                         Color="Red" Size="20" />
    </ImageButton.Source>
</ImageButton>
<Label Text="{x:Static fonts:MaterialDesign.lock}" 
       FontFamily="{StaticResource MaterialDesignIcons}" 
       TextColor="Green" FontSize="20" BackgroundColor="LightGray" VerticalTextAlignment="Center" />

The font icons can be defined as follows, example from Iconize fonts in Iconize/src/Fonts/Plugin.Iconize.MaterialDesignIcons/MaterialDesignIconsCollection.cs;

Icons.Add("mdi-access-point", '\uf002');
...
Icons.Add("mdi-bus-double-decker", '\uf79d');
...
Icons.Add("mdi-lock", '\uf33e');
...

So the class MaterialDesign below is placed in the same assembly as the ContentPage would be:

namespace Fonts
{
    public static class MaterialDesign
    {
#pragma warning disable IDE1006 // Naming Styles
        public static string access_point => "\uf002";
        ...
        public static string bus_double_decker => "\uf79d";
        ...
        //lock is a keyword in c#, so add "@" to use it as name of property
        public static string @lock => "\uf33e";
        ...
#pragma warning restore IDE1006 // Naming Styles
    }
}

The key,value entries of the Iconize MaterialDesignIconsCollection class can be converted to the auto property syntax of the MaterialDesign class using e.g. search/replace in a text editor (not shown here).

In this example the iconize-materialdesignicons.ttf font file is placed in the Assets folder on Android (build action AndroidAsset), Resources folder on iOS (build action BundleResource), and Assets/Fonts on UWP (build action Content).

On iOS add the font to Info.plist in the <app>.iOS project:

<key>UIAppFonts</key>
<array>
    <string>iconize-materialdesignicons.ttf</string>
</array>