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: 30 days 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 (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T16:06:57.000Z (4 months ago)
- Last Synced: 2024-08-31T10:03:39.495Z (3 months ago)
- Topics: cupertino, dotnet, fluent, fontawesome, icons, material, maui, maui-
- Language: C#
- Homepage:
- Size: 4.74 MB
- Stars: 194
- Watchers: 4
- Forks: 12
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-dotnet-maui - MauiIcons - square)](https://github.com/AathifMahir/MauiIcons/stargazers)|[](https://github.com/AathifMahir/MauiIcons/commits) (UI)
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();
}
}
```
# 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"
```
## 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();
}
```
## Breaking Changes
### Version 1 to 2
`Old (v1)`
```xml
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"
```
`New (v2)`
```xml
xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"
```
### Version 2 to 3
- Removal of **TypeArgument** and Built in OnPlatform and OnIdiom Support, Use MauiIcons Integrated [Custom OnPlatform and OnIdioms Feature](#custom-onplatform-and-onidiom-usage)
- Removal of **Dotnet 7** Support
### Nuget Package Changes
- **`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.Material.Outlined`](https://www.nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Outlined/)
- [`AathifMahir.Maui.MauiIcons.Material.Rounded`](https://www.nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Rounded/)
- [`AathifMahir.Maui.MauiIcons.Material.Sharp`](https://www.nuget.org/packages/AathifMahir.Maui.MauiIcons.Material.Sharp/)
- **`AathifMahir.Maui.MauiIcons.FluentFilled`** is Depcrecated and Replaced by [`AathifMahir.Maui.MauiIcons.Fluent.Filled`](https://www.nuget.org/packages/AathifMahir.Maui.MauiIcons.Fluent.Filled/)
## 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
```
## Xaml Extension Data Binding Usage
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.
```xml
```
## C# Markup Usage
```csharp
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);
```
## 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 isPlaceHolder Parameter to False
```csharp
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.
## 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
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);
```
## Custom 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"});
```
# 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 |
| **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.