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

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

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}"/>

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

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

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

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
OnClickAnimationType	`AnimationType`	Gets or Sets the type of on-click animation for the element
OnClickAnimationDuration	`uint`	Gets or sets the duration of the on-click animation for the element
OnPlatforms	`IList<string>`	Gets or sets the supported platforms
OnIdioms	`IList<string>`	Gets or sets the supported idioms

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.

Name		Name	Last commit message	Last commit date
Latest commit History 527 Commits
.github		.github
images		images
samples/MauiIcons.Sample		samples/MauiIcons.Sample
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

.Net Maui Icons

Get Started

Table of Contents

Usage

Advanced Settings

Workaround

Built in Control Usage

Xaml Extension Usage

Data Binding Usage

C# Markup Usage

Applying Icon To Text or Placeholder

Icon Suffix

Animation Usage

OnPlatform and OnIdiom Usage

Breaking Changes

Version 3 to 4

Version 2 to 3

Version 1 to 2

New Changes in v4

Example of Using Styles

Advanced Usage

Properties

License

Contribute

About

Releases 31

Sponsor this project

Contributors 2

Languages

License

AathifMahir/MauiIcons

Folders and files

Latest commit

History

Repository files navigation

.Net Maui Icons

Get Started

Table of Contents

Usage

Advanced Settings

Workaround

Built in Control Usage

Xaml Extension Usage

Data Binding Usage

C# Markup Usage

Applying Icon To Text or Placeholder

Icon Suffix

Animation Usage

OnPlatform and OnIdiom Usage

Breaking Changes

Version 3 to 4

Version 2 to 3

Version 1 to 2

New Changes in v4

Example of Using Styles

Advanced Usage

Properties

License

Contribute

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 31

Sponsor this project

Contributors 2

Languages