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
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 eg 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.