The .NET Maui Icons is a comprehensive library collection that facilitates icon and font icon management within the .NET Maui framework. This library includes controls that seamlessly integrate three iconic design systems: Fluent, Material, Cupertino and FontAwesome. These controls offer complete access to the mentioned Icon collections, delivering a rich and versatile iconography solution for .NET Maui applications.
In order to use the .NET MAUI Icons you need to call the extension method in your
MauiProgram.cs
file as follows:
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
// Maui App Builder that Comes with Default Maui App
builder.UseMauiApp<App>()
// Initialises the .Net Maui Icons - Fluent
.UseFluentMauiIcons()
// Initialises the .Net Maui Icons - Material
.UseMaterialMauiIcons()
// Initialises the .Net Maui Icons - Cupertino
.UseCupertinoMauiIcons();
}
}
In order to make use of the .Net Maui Icons you can use the below namespace:
xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"
if you came across this issue dotnet/maui#7503 when using new namespace, Make sure to create an discarded instance of MauiIcon in the codebehind like below
public MainPage()
{
InitializeComponent();
// Temporary Workaround for url styled namespace in xaml
_ = new MauiIcon();
}
Old (v1)
xmlns:cupertino="clr-namespace:MauiIcons.Cupertino;assembly=MauiIcons.Cupertino"
xmlns:fluent="clr-namespace:MauiIcons.Fluent;assembly=MauiIcons.Fluent"
xmlns:material="clr-namespace:MauiIcons.Material;assembly=MauiIcons.Material"
<cupertino:MauiIcon Icon="Airplane"/>
<fluent:MauiIcon Icon="Accounts"/>
<material:MauiIcon Icon="ABC"/>
New (v2)
xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"
<mi:MauiIcon Icon="{mi:Cupertino Airplane}"/>
<mi:MauiIcon Icon="{mi:Fluent Accounts}"/>
<mi:MauiIcon Icon="{mi:Material ABC}"/>
AathifMahir.Maui.MauiIcons.Material
doesn't contain all the Variants anymore, Now only contains Regular version of Material Icons. Other Variants Decoupled into Seperate Packages Like Below
AathifMahir.Maui.MauiIcons.FluentFilled
is Depcrecated and Replaced by AathifMahir.Maui.MauiIcons.Fluent.Filled
Xaml
<mi:MauiIcon Icon="{mi:Cupertino Airplane}"/>
<mi:MauiIcon Icon="{mi:material ABC}"/>
<mi:MauiIcon Icon="{mi:fluent Accounts}"/>
C#
// Traditional C#
new MauiIcon() {Icon = CupertinoIcons.AppBadge, IconColor = Colors.Green};
new MauiIcon() {Icon = FluentIcons.Accounts, IconColor = Colors.Blue};
new MauiIcon() {Icon = MaterialIcons.ABC, IconColor = Colors.Yellow};
// C# Markup
new MauiIcon().Icon(CupertinoIcons.AntFill).IconColor(Colors.Purple);
new MauiIcon().Icon(FluentIcons.Accounts).IconColor(Colors.Magenta);
new MauiIcon().Icon(MaterialIcons.ABC).IconColor(Colors.Violet);
<Image Aspect="Center" Source="{mi:Cupertino Icon=ArchiveboxFill}"/>
<Label Text="{mi:Fluent Icon=Accounts}"/>
<ImageButton Source="{mi:Material Icon=AccessAlarm}"/>
<Entry Placeholder="{mi:FontAwesome Icon=AddressBook}"/>
<Button Text="{mi:SegoeFluent AdjustHologram, IconSize=Large, IconColor=Pink}" />
The below example, Make Sures that BindingContext Inside the Xaml Extension is Set to Root of this Page, Likewise make sure to set the BindingContext When using Binding Inside the MauiIcons Xaml Extension, Additionally This example Binds to MyIcon and MyColor Properties Which Present in Code Behind But Not Included in this Example.
<ContentPage
x:Class="MauiIcons.Sample.BindingPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiIcons.Sample"
xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"
x:Name="thisRoot">
<HorizontalStackLayout>
<Label Text="{mi:Fluent BindingContext={x:Reference thisRoot}, Icon={Binding MyIcon}, IconColor={Binding MyColor}}" />
<Image>
<Image.Source>
<FontImageSource
Glyph="{mi:Fluent BindingContext={x:Reference thisRoot},
Icon={Binding MyIcon}, IconColor={Binding MyColor}}" />
</Image.Source>
</Image>
<Image Source="{mi:Fluent BindingContext={x:Reference thisRoot}, Icon={Binding MyIcon}, IconColor={Binding MyColor}}" />
<ImageButton Source="{mi:Fluent BindingContext={x:Reference thisRoot}, Icon={Binding MyIcon}, IconColor={Binding MyColor}" />
<mi:MauiIcon Icon="{mi:Fluent}" />
</HorizontalStackLayout>
</ContentPage>
new ImageButton().Icon(FluentIcons.Accounts);
new Image().Icon(CupertinoIcons.AntFill);
new Label().Icon(MaterialIcons.Home).IconSize(40.0).IconColor(Colors.Red);
new Entry().Icon(CupertinoIcons.AntFill).IconSize(20.0).IconColor(Colors.Aqua);
new SearchBar().Icon(MaterialIcons.ABC);
Controls that Supports Placeholder, Can Assign the Icon To PlaceHolder or Text, Defaults to Placeholder but can be set to Text by Setting isPlaceHolder Parameter to False
new Entry().Icon(CupertinoIcons.AntFill, isPlaceHolder: false).IconSize(20.0).IconColor(Colors.Aqua);
new SearchBar().Icon(MaterialIcons.ABC, isPlaceHolder: false);
Disclaimer: It's important to note that not all controls are compatible with C# markup. We have conducted tests with the following controls in the current release: Label, Image, ImageButton, SearchBar, Editor, and Entry. Additionally, the native MauiIcon control, when combined with C# markup, can prove to be quite versatile and offer extra features for various scenarios.
The Built in MauiIcon Control Does Support IconSuffix and It's Customizations, You can use Icon Suffix Feature by Following Below Examples
Xaml
<mi:MauiIcon Icon="{mi:Material Icon=AirplanemodeActive}" IconSuffixTextColor="Red" IconSuffix="Off" IconSuffixFontSize="16"/>
<mi:MauiIcon Icon="{mi:FontAwesomeBrand Icon=Github}" IconSuffixTextColor="Cyan" IconSuffix="Repo" IconSuffixFontSize="16"/>
C#
new MauiIcon().Icon(FontAwesomeBrandIcons.Pinterest).IconColor(Colors.Red).IconSuffix("Pin").IconSuffixBackgroundColor(Colors.White);
new MauiIcon().Icon(CupertinoIcons.Airplane).IconColor(Colors.Cyan).IconSuffix("Flying");
Xaml
<mi:MauiIcon Icon="{mi:Cupertino Airplane}" EntranceAnimationType="Fade"/>
<mi:MauiIcon Icon="{mi:material ABC}" EntranceAnimationType="Rotate" EntranceAnimationDuration="4000"/>
<mi:MauiIcon Icon="{mi:fluent Accounts}" EntranceAnimationType="Scale"/>
C#
new MauiIcon().Icon(CupertinoIcons.AntFill).EntranceAnimationType(AnimationType.Fade);
new MauiIcon().Icon(FluentIcons.Accounts).EntranceAnimationType(AnimationType.Rotate);
new MauiIcon().Icon(MaterialIcons.ABC).EntranceAnimationType(AnimationType.Scale).EntranceAnimationDuration(4000);
Xaml
<mi:MauiIcon Icon="{mi:Cupertino Airplane}" OnPlatforms="WinUI, Android, MacCatalyst"/>
<mi:MauiIcon Icon="{mi:material ABC}" OnIdioms="Desktop, Phone, Tablet"/>
<mi:MauiIcon Icon="{mi:fluent Accounts}" OnPlatforms="Android" OnIdioms="Phone"/>
C#
new MauiIcon().Icon(CupertinoIcons.AntFill).OnPlatforms(new List<string>{"WinUI", "Android"});
new MauiIcon().Icon(FluentIcons.Accounts).OnIdioms(new List<string>{"Desktop", "Phone"});
new MauiIcon().Icon(MaterialIcons.ABC).OnPlatforms(new List<string>{"WinUI", "Android"}).OnIdioms(new List<string>{"Desktop", "Phone"});
Parameters | Type | Description |
---|---|---|
Icon | Enum |
Gets or sets the icon enum value |
IconSize | double |
Gets or sets the size of the icon |
IconColor | Color |
Gets or sets the color of the icon |
IconBackgroundColor | Color |
Gets or sets the background color of the icon |
IconAutoScaling | bool |
Gets or sets a value indicating whether the icon should automatically scale |
IconSuffix | string |
Gets or sets the suffix text for the icon |
IconSuffixFontFamily | string |
Gets or sets the font family for the icon suffix |
IconSuffixFontSize | double |
Gets or sets the font size for the icon suffix |
IconSuffixTextColor | Color |
Gets or sets the text color for the icon suffix |
IconSuffixBackgroundColor | Color |
Gets or sets the background color for the icon suffix |
IconAndSuffixBackgroundColor | Color |
Gets or sets the background color for the icon and Suffix, It applies the color to whole control |
IconSuffixAutoScaling | bool |
Gets or sets a value indicating whether the icon suffix should automatically scale. |
EntranceAnimationType | AnimationType |
Gets or Sets the type of entrance animation for the element |
EntranceAnimationDuration | uint |
Gets or sets the duration of the entrance animation for the element |
OnPlatforms | IList<string> |
Gets or sets the supported platforms |
OnIdioms | IList<string> |
Gets or sets the supported idioms |
MauiIcons is Licensed Under MIT License.
Fluent UI System Icons is Licensed Under MIT License.
Material Design Icons is Licensed Under Apache License 2.0.
Segoe Fluent Icons is Licensed by Microsoft Under Couple of License.
Cupertino Icons is Licensed Under MIT License.
FontAwesome Icons is Licensed by FontAwesome Under Couple of License
If you wish to contribute to this project, please don't hesitate to create an issue or request. Your input and feedback are highly appreciated. Additionally, if you're interested in supporting the project by providing resources or becoming a sponsor, your contributions would be welcomed and instrumental in its continued development and success. Thank you for your interest in contributing to this endeavor.