Awesome

.Net Maui Icons

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.

Package	Latest stable	Latest Preview	Description
AathifMahir.Maui.MauiIcons.SegoeFluent			Maui Icons - Segoe Fluent Package Contains Complete Collection of Built in Windows Segoe Fluent Icons.
AathifMahir.Maui.MauiIcons.Fluent			Maui Icons - Fluent Package Contains Complete Collection of Open Source Version Fluent Icons from Microsoft.
AathifMahir.Maui.MauiIcons.Fluent.Filled			Maui Icons - Fluent Filled Package Contains Complete Collection of Open Source Version Fluent Icons from Microsoft.
AathifMahir.Maui.MauiIcons.Material			Maui Icons - Material Package Contains Complete Collection of Material Regular Icons.
AathifMahir.Maui.MauiIcons.Material.Outlined			Maui Icons - Material Outlined Package Contains Complete Collection of Material Outlined Icons.
AathifMahir.Maui.MauiIcons.Material.Rounded			Maui Icons - Material Rounded Package Contains Complete Collection of Material Rounded Icons.
AathifMahir.Maui.MauiIcons.Material.Sharp			Maui Icons - Material Sharp Package Contains Complete Collection of Material Sharp Icons.
AathifMahir.Maui.MauiIcons.Cupertino			Maui Icons - Cupertino Package Contains Complete Collection of Open Source Version Framework 7's iOS Icons.
AathifMahir.Maui.MauiIcons.FontAwesome			Maui Icons - FontAwesome Package Contains Complete Collection of Free and Open Source Version of Regular FontAwesome 6 Icons.
AathifMahir.Maui.MauiIcons.FontAwesome.Solid			Maui Icons - FontAwesome Solid Package Contains Complete Collection of Free and Open Source Version of Solid FontAwesome 6 Icons.
AathifMahir.Maui.MauiIcons.FontAwesome.Brand			Maui Icons - FontAwesome Brand Package Contains Complete Collection of Free and Open Source Version of Brand FontAwesome 6 Icons.

Get Started

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();
	}
}

Table of Contents

• Usage
• Advanced Settings
• New Changes in v4
• Workaround (Must Read)
• Built in Control Usage
• Xaml Extension Usage
• Data Binding Usage
• C# Markup Usage
• OnPlatform and OnIdiom Usage
• Breaking Changes
  • Version 3 to 4
  • Version 2 to 3
  • Version 1 to 2
• Advanced Usage
• Contribute
• License

Usage

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"

Advanced Settings

You can set the default icon size, font override, and default font auto-scaling using the UseMauiIconsCore builder extension as follows:

builder.UseMauiIconsCore(x => 
{
	x.SetDefaultIconSize(30.0);
	x.SetDefaultFontOverride(true);
	x.SetDefaultFontAutoScaling(true);
})

Workaround

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();
    }

Built in Control Usage

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);

Xaml Extension Usage

<Image Aspect="Center" mi.MauiIcon.Value="{mi:Cupertino Icon=ArchiveboxFill}"/>

<Label mi.MauiIcon.Value="{mi:Fluent Icon=Accounts, FontOverride=True}"/>

<ImageButton mi.MauiIcon.Value="{mi:Material Icon=AccessAlarm}"/>

<Entry mi.MauiIcon.Value="{mi:FontAwesome Icon=AddressBook, FontOverride=True}"/>

<Button mi.MauiIcon.Value="{mi:SegoeFluent AdjustHologram, IconSize=Large, IconColor=Pink}" />

Data Binding Usage

The below 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 mi.MauiIcon.Value="{mi:Fluent Icon={Binding MyIcon}, 
                   IconColor={Binding MyColor}, FontOverride=True}" />

            <Image>
                <Image.Source>
                    <FontImageSource 
                    Glyph="{mi:Fluent Icon={Binding MyIcon}, IconColor={Binding MyColor}}" />
                </Image.Source>
            </Image>

            <Image mi.MauiIcon.Value="{mi:Fluent Icon={Binding MyIcon}, 
                   IconColor={Binding MyColor}}" />

            <ImageButton mi.MauiIcon.Value="{mi:Fluent Icon={Binding MyIcon}, 
                         IconColor={Binding MyColor}" />

            <mi:MauiIcon Icon="{mi:Fluent Icon={Binding MyIcon}}" />

            <mi:MauiIcon mi:MauiIcon.Value="{mi:Fluent Icon={Binding MyIcon}}">
        </HorizontalStackLayout>
</ContentPage>

C# Markup Usage

new ImageButton().Icon(FluentIcons.Accounts);

new Image().Icon(CupertinoIcons.AntFill);

new Label().Icon(MaterialIcons.Home, fontOverride: true).IconSize(40.0).IconColor(Colors.Red);

new Entry().Icon(CupertinoIcons.AntFill, fontOverride: true).IconSize(20.0).IconColor(Colors.Aqua);

new SearchBar().Icon(MaterialIcons.ABC, fontOverride: true);

Applying Icon To Text or Placeholder

Controls that Supports Placeholder, Can Assign the Icon To PlaceHolder or Text, Defaults to Placeholder but can be set to Text by Setting TargetName Parameter to Text

new Entry().Icon(CupertinoIcons.AntFill, fontOverride: true, targetName: "Text").IconSize(20.0).IconColor(Colors.Aqua);

new SearchBar().Icon(MaterialIcons.ABC, fontOverride: true, targetName: "PlaceHolder"); // Setting TargetName PlaceHolder is Redundant as it's Default

Disclaimer: It's important to note that we are Overriding Font on Input Control to Set the Icon that Could Cause Unexpected Behaviors and Rendering Issues as well.

Icon Suffix

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");

Animation Usage

Xaml

<!-- Entrance Animation -->
<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"/>

<!-- OnClick Animation -->
<mi:MauiIcon Icon="{mi:Cupertino Airplane}" OnClickAnimationType="Fade"/>
<mi:MauiIcon Icon="{mi:material ABC}" OnClickAnimationType="Rotate" OnClickAnimationDuration="4000"/>
<mi:MauiIcon Icon="{mi:fluent Accounts}" OnClickAnimationType="Scale"/>

C#

// Entrance Animation
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);

// OnClick Animation
new MauiIcon().Icon(CupertinoIcons.AntFill).OnClickAnimationType(AnimationType.Fade);
new MauiIcon().Icon(FluentIcons.Accounts).OnClickAnimationType(AnimationType.Rotate);
new MauiIcon().Icon(MaterialIcons.ABC).OnClickAnimationType(AnimationType.Scale).OnClickAnimationDuration(4000);

OnPlatform and OnIdiom Usage

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"});

Breaking Changes

Version 3 to 4

• Icon won't be applied to the Controls like Entry, SearchBar and etc.. by default Instead v4 would throw an Exception, Need to set FontOverride to true to apply the Icon to these Controls on Builder Extension Level or Control Level
  • This Behavior can be reverted to Behavior of v3 by Using new UseMauiIconsCore Builder Extension and using SetDefaultFontOverride Method like Below

	builder.UseMauiIconsCore(x => 
	{
		x.SetDefaultFontOverride(true);
	})

• Icon Size is Now Set to Control's FontSize by Default, Previously it was set to 30.0 by Default
  • This Behavior can be reverted to Behavior of v3 by Using new UseMauiIconsCore Builder Extension and using SetDefaultIconSize Method like Below

	builder.UseMauiIconsCore(x => 
	{
		x.SetDefaultIconSize(30.0);
	})

Version 2 to 3

• Removal of TypeArgument and Built in OnPlatform and OnIdiom Support, Use MauiIcons Integrated OnPlatform and OnIdioms Feature
• Removal of Dotnet 7 Support

Version 1 to 2

Old (v1)

xmlns:fluent="clr-namespace:MauiIcons.Fluent;assembly=MauiIcons.Fluent"

<fluent:MauiIcon Icon="AppFolder48"/>

New (v2)

xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"

<mi:MauiIcon Icon="{mi:Fluent AppFolder48}"/>

New Changes in v4

1. We have a new way of Assigning/Setting Icons, Introducing New Attached Property for Icons, The new AttachedProperty Brings in Support for Triggers, Behaviors, Styles, etc.. which is lacking on Classic Xaml Markup Extension, and also it's more cleaner and readable

/// Old
<Image Aspect="Center" Source="{mi:Fluent Icon=Accessibility48}"/>

// New
<Image Aspect="Center" mi.MauiIcon.Value="{mi:Fluent Icon=Accessibility48}"/>

Disclaimer: The Old Xaml Markup Extension is still Supported and can be used, but it's recommended to use the new Attached Property for better support and readability and we have plans to deprecate the old Xaml Markup Extension in the future in favor of Attached Property

Example of Using Styles

<Style x:Key="ButtonStyle" TargetType="Button">
       <Setter Property="mi:MauiIcon.Value" Value="{mi:Fluent Icon=AppFolder48}" />
</Style>

<Button Style="{StaticResource ButtonStyle}"/>

2. Introducing New UseMauiIconsCore Builder Extension for Setting Default Icon Size, Font Override, Default Font Auto Scaling and etc.. Check the Advanced Settings for More Information

3. Improved Built in OnPlatforms and OnIdioms with Binding Improvements and Enhanced Performance

4. New OnClickAnimation Support for MauiIcon Control, Check the Animation Usage for More Information

Advanced Usage

• If you came across Situation where the Controls Does Have Multiple Source to Apply Icons, You want the Icon you Set on Attached Property to Apply to All the Sources, You can do that as well, Set the TargetName to ., This will Apply the Icon to All the Sources

<Tab mi:MauiIcon.Value="{mi:Fluent Icon=Home32, TargetName='.'}">
            <ShellContent
                Title="Xaml"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" />
</Tab>

• If you came across Situation Where you want to Apply the Icon to Different Source over Default Source that Set by MauiIcons, You can do that as well, Set the TargetName to Source Property Name, This will Apply the Icon to that Specific Source

<Tab mi:MauiIcon.Value="{mi:Fluent Icon=Home32, TargetName='FlyoutIcon'}">
            <ShellContent
                Title="Xaml"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" />
</Tab>

• If you came across Situation where the Controls Does Have Multiple Source to Apply Icons, You want different icon for those Additional Sources, You can do that by Applying the Icon Directly to Source Using Xaml Markup like Below Example

<Tab mi:MauiIcon.Value="{mi:Fluent Icon=Home32}" FlyoutIcon="{mi:Fluent Icon=Accessibility48}">
            <ShellContent
                Title="Xaml"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" />
</Tab>

Overall TargetName Behaves like a Source Property Name, If you want to Apply the Icon to Specific Source, Set the TargetName to Source Property Name, If you want to Apply the Icon to All the Sources, Set the TargetName to .

Properties

License

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

Contribute

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.