Xamarin Forms Material Design Icons Webfont - xaml

Question

I am still pretty new to Xamarin Forms and I am having issues with displaying Material Design Icons for my app. I keep getting the box with question mark and I do not understand why. I am using a control template to create a header and footer for my page.
Heres the output on the screen:
View Display
Heres my App.xaml code:
<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="DueMore.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="fgColor">#66169C</Color>
<Color x:Key="bgColor">#FFFFFF</Color>
<Color x:Key="OverDueItem">#FF1C07</Color>
<OnPlatform x:Key="Material" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
<Style TargetType="{x:Type Button}" x:Key="MaterialIcons">
<Setter Property="FontFamily" Value="{DynamicResource Material}"/>
<Setter Property="FontSize" Value="100"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="TextColor" Value="{DynamicResource fgColor}"/>
<Setter Property="FontSize" Value="Large"/>
</Style>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{DynamicResource bgColor}" />
<Setter Property="BarTextColor" Value="{DynamicResource fgColor}" />
</Style>
<ControlTemplate x:Key="MainPageTemplate">
<StackLayout>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1"
Grid.RowSpan="10"
Grid.Column="0"
Grid.ColumnSpan="5"/>
<Entry Placeholder="Enter an Inbox Item"
HeightRequest="50"
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="9"
BackgroundColor="{DynamicResource bgColor}"
TextColor="{DynamicResource fgColor}"
HorizontalOptions="Fill"/>
<Button Text=""
Style="{StaticResource MaterialIcons}"
Clicked="Save_Clicked"
Grid.Row="9"
Grid.Column="3"/>
<Button Text=""
Style="{StaticResource MaterialIcons}"
Clicked="Button_Clicked"
Grid.Row="9"
Grid.Column="4"/>
</Grid>
</StackLayout>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
Any help would be appreciated! Thank you in advance!

Answer 1

On Android, you need to add the font icons to your Assets folder in your android platform specific project. On iOS, you need to add the font icons to the Resources folder in the iOS project.
ControlTemplate usage:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="App2.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
ControlTemplate="{StaticResource MainPageTemplate}"
mc:Ignorable="d">
<StackLayout>
<!-- Place new controls here -->
</StackLayout>
Screenshot:
For the source file with Material Design Icons, you could download from the GitHub.
https://github.com/WendyZang/Test/tree/master/MaterialDesignIcons/App2