Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aathifmahir/mauiicons
MauiIcons is Icon Collection Library for .Net Maui
https://github.com/aathifmahir/mauiicons
cupertino dotnet fluent fontawesome icons material maui maui-
Last synced: about 11 hours ago
JSON representation
MauiIcons is Icon Collection Library for .Net Maui
- Host: GitHub
- URL: https://github.com/aathifmahir/mauiicons
- Owner: AathifMahir
- License: mit
- Created: 2022-10-27T14:26:35.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-17T15:57:29.000Z (4 months ago)
- Last Synced: 2025-01-30T06:55:46.469Z (3 days ago)
- Topics: cupertino, dotnet, fluent, fontawesome, icons, material, maui, maui-
- Language: C#
- Homepage:
- Size: 4.84 MB
- Stars: 229
- Watchers: 6
- Forks: 16
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# .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` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.SegoeFluent/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.SegoeFluent/absoluteLatest) | Maui Icons - Segoe Fluent Package Contains Complete Collection of Built in Windows Segoe Fluent Icons.
`AathifMahir.Maui.MauiIcons.Fluent` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Fluent/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Fluent/absoluteLatest) | Maui Icons - Fluent Package Contains Complete Collection of Open Source Version Fluent Icons from Microsoft.
`AathifMahir.Maui.MauiIcons.Fluent.Filled` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Fluent.Filled/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Fluent.Filled/absoluteLatest) | Maui Icons - Fluent Filled Package Contains Complete Collection of Open Source Version Fluent Icons from Microsoft.
`AathifMahir.Maui.MauiIcons.Material` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material/absoluteLatest) | Maui Icons - Material Package Contains Complete Collection of Material Regular Icons.
`AathifMahir.Maui.MauiIcons.Material.Outlined` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Outlined/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Outlined/absoluteLatest) | Maui Icons - Material Outlined Package Contains Complete Collection of Material Outlined Icons.
`AathifMahir.Maui.MauiIcons.Material.Rounded` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Rounded/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Rounded/absoluteLatest) | Maui Icons - Material Rounded Package Contains Complete Collection of Material Rounded Icons.
`AathifMahir.Maui.MauiIcons.Material.Sharp` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Sharp/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Sharp/absoluteLatest) | Maui Icons - Material Sharp Package Contains Complete Collection of Material Sharp Icons.
`AathifMahir.Maui.MauiIcons.Cupertino` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Cupertino/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.Cupertino/absoluteLatest) | Maui Icons - Cupertino Package Contains Complete Collection of Open Source Version Framework 7's iOS Icons.
`AathifMahir.Maui.MauiIcons.FontAwesome` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.FontAwesome/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.FontAwesome/absoluteLatest) | Maui Icons - FontAwesome Package Contains Complete Collection of Free and Open Source Version of Regular FontAwesome 6 Icons.
`AathifMahir.Maui.MauiIcons.FontAwesome.Solid` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.FontAwesome.Solid/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.FontAwesome.Solid/absoluteLatest) | Maui Icons - FontAwesome Solid Package Contains Complete Collection of Free and Open Source Version of Solid FontAwesome 6 Icons.
`AathifMahir.Maui.MauiIcons.FontAwesome.Brand` | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.FontAwesome.Brand/) | [](https://nuget.org/packages/AathifMahir.Maui.MauiIcons.FontAwesome.Brand/absoluteLatest) | 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:
```csharp
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
// Maui App Builder that Comes with Default Maui App
builder.UseMauiApp()
// 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](#usage)
- [Advanced Settings](#advanced-settings)
- [New Changes in v4](#new-changes-in-v4)
- [Workaround (Must Read)](#workaround)
- [Built in Control Usage](#built-in-control-usage)
- [Xaml Extension Usage](#xaml-extension-usage)
- [Data Binding Usage](#data-binding-usage)
- [C# Markup Usage](#c-markup-usage)
- [OnPlatform and OnIdiom Usage](#onplatform-and-onidiom-usage)
- [Breaking Changes](#breaking-changes)
- [Version 3 to 4](#version-3-to-4)
- [Version 2 to 3](#version-2-to-3)
- [Version 1 to 2](#version-1-to-2)
- [Advanced Usage](#advanced-usage)
- [Contribute](#contribute)
- [License](#license)
# Usage
In order to make use of the **.Net Maui Icons** you can use the below namespace:
```xml
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:
```csharp
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
```csharp
public MainPage()
{
InitializeComponent();
// Temporary Workaround for url styled namespace in xaml
_ = new MauiIcon();
}
```
## Built in Control Usage
`Xaml`
```xml
```
`C#`
```csharp
// 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
```xml
```
## Data Binding Usage
The below example Binds to MyIcon and MyColor Properties Which Present in Code Behind But Not Included in this Example.
```xml
```
## C# Markup Usage
```csharp
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`
```csharp
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`
```xml
```
`C#`
```csharp
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`
```xml
```
`C#`
```csharp
// 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`
```xml
```
`C#`
```csharp
new MauiIcon().Icon(CupertinoIcons.AntFill).OnPlatforms(new List{"WinUI", "Android"});
new MauiIcon().Icon(FluentIcons.Accounts).OnIdioms(new List{"Desktop", "Phone"});
new MauiIcon().Icon(MaterialIcons.ABC).OnPlatforms(new List{"WinUI", "Android"}).OnIdioms(new List{"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
```csharp
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
```csharp
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](#onplatform-and-onidiom-usage)
- Removal of **Dotnet 7** Support
---
### Version 1 to 2
`Old (v1)`
```xml
xmlns:fluent="clr-namespace:MauiIcons.Fluent;assembly=MauiIcons.Fluent"
```
`New (v2)`
```xml
xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"
```
## 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
```xml
/// Old
// New
```
**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
```xml
<Setter Property="mi:MauiIcon.Value" Value="{mi:Fluent Icon=AppFolder48}" />
```
---
2. Introducing New `UseMauiIconsCore` Builder Extension for Setting Default Icon Size, Font Override, Default Font Auto Scaling and etc.. Check the [Advanced Settings](#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](#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
```xml
```
- 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
```xml
```
- 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
```xml
```
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` | Gets or sets the supported platforms |
| **OnIdioms** | `IList` | Gets or sets the supported idioms |
# License
>**MauiIcons** is Licensed Under [MIT License](https://github.com/AathifMahir/MauiIcons/blob/master/LICENSE).
>**Fluent UI System Icons** is Licensed Under [MIT License](https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE).
>**Material Design Icons** is Licensed Under [Apache License 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE).
>**Segoe Fluent Icons** is Licensed by Microsoft Under Couple of [License](https://learn.microsoft.com/en-us/typography/font-list/segoe-mdl2-assets).
>**Cupertino Icons** is Licensed Under [MIT License](https://github.com/framework7io/framework7-icons/blob/master/LICENSE).
>**FontAwesome Icons** is Licensed by FontAwesome Under Couple of [License](https://fontawesome.com/license/free)
# 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**](https://github.com/sponsors/AathifMahir), your contributions would be welcomed and instrumental in its continued development and success. Thank you for your interest in contributing to this endeavor.