[Feature] Add Material Symbols

[vsimplea]

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like @AathifMahir mentioned on Discord that he would like to add material symbols as a new module into MauiIcons Package Since, it can't break the current material Icons module, I guess creating a new module makes sense.

I'm suggesting a new naming convention for the current and new packages, below: AathifMahir.Maui.MauiIcons.Core to be replaced for AathifMahir.Maui.Core AathifMahir.Maui.MauiIcons.SegoeFluent to be replaced for AathifMahir.Maui.Fluent.Segoe.Icons AathifMahir.Maui.MauiIcons.Fluent to be replaced for AathifMahir.Maui.Fluent.OpenSource.OutlinedIcons AathifMahir.Maui.MauiIcons.FluentFilled to be replaced for AathifMahir.Maui.Fluent.OpenSource.FilledIcons AathifMahir.Maui.MauiIcons.Material to be replaced for AathifMahir.Maui.Material.OutlinedIcons

New AathifMahir.Maui.Material.FilledIcons AathifMahir.Maui.Material.RoundedIcons AathifMahir.Maui.Material.TwoToneIcons AathifMahir.Maui.Material.OutlinedSymbols AathifMahir.Maui.Material.RoundedSymbols

this new naming convention reduces the use of the word "Maui" two times and separates each font so we can include the desired font icons in our app only :)

Thanks @AathifMahir for looking into this.

[AathifMahir]

Thanks for bringing this in, will be implementing this feature request as soon as possible 👍

[AathifMahir]

I'm looking into including round, Outlined and Twotone in the same module instead separating them.

Here's the plan:

As far as I looked into the size, regular, round, outlined and twotone combined weighs around 3 to 4mb therefore keeping it on the same module makes sense for me. When it comes to currently M2 icons. I'm planning to do the same since that also weighs less than 5mb

What do you think? @vsimplea

[vhugogarcia]

Thanks @AathifMahir for asking me for feedback. One of the issues with the mobile development and as you know as developer is the final app size. By combining several fonts into the same package, the app may grow just 15MB for using material and maybe I just need to two-tone.

So, it makes sense yes, however, in an effort to avoid increasing the app size keep them separate them will be better.

However, my opinion is not in stone, I am happy to learn from other ideas 😎🙂🙂

[AathifMahir]

Thanks @AathifMahir for asking me for feedback. One of the issues with the mobile development and as you know as developer is the final app size. By combining several fonts into the same package, the app may grow just 15MB for using material and maybe I just need to two-tone.

So, it makes sense yes, however, in an effort to avoid increasing the app size keep them separate them will be better.

However, my opinion is not in stone, I am happy to learn from other ideas 😎🙂🙂

Yeah, I got the point. I guess instead of decoupling all of the icons into lots of modules. I guess we can write a Source Generator which does remove icons that were not in use at compile time. That's a long way ahead for now. I'll consider your feedback and think about possible options in the current scenario. The biggest problem with decoupling everything to small modules is confusion that devs would face on selecting one. I guess we need to find a way to solve that if we are going in the root of decoupling.

[vhugogarcia]

@AathifMahir I think we can update the documentation with a few screenshots and samples, so devs can read the documentation and install the proper package. Also, this will be beneficial in terms of versioning, because Google is releasing new Symbols and updating current ones, so versioning of the package will be better, so you know which font really was updated. These may not be updated very often, but maybe every 2 months or so.

I also think you can give it a try to do it in packs as you mentioned and we can test and see if the final app sizes grows too much or no. Maybe this will be the best option, we can try and learn from it. If we pack them by type, we can do something like this:

• AathifMahir.Maui.Core
• AathifMahir.Maui.Icons.Fluent.Segoe
• AathifMahir.Maui.Icons.Fluent.OpenSource > This contains the Outlined and Filled versions
• AathifMahir.Maui.Icons.MaterialIcons > This contains the Outlined, Filled, Rounded, TwoTone versions
• AathifMahir.Maui.Icons.MaterialSymbols This contains the Outlined, Rounded versions

XAML usage sample

xmlns:fluent="clr-namespace:MauiIcons.Fluent;assembly=Maui.Icons.Fluent.OpenSource"
xmlns:material="clr-namespace:MauiIcons.Material;assembly=Maui.Icons.MaterialIcons"
xmlns:materialSymbols="clr-namespace:MauiIcons.Material;assembly=Maui.Icons.MaterialSymbols"

<!-- Fluent Icon Control -->
<fluent:Icon Icon="Accounts" Variation="Outlined" />

<!-- Fluent Icon Image Extension -->
<Image Aspect="Center" Source="{fluent:Icon Icon=ActionCenterQuiet, Variation=Outlined}"/>

<!-- Material Icon Control -->
<material:Icon Icon="ABC" Variation="TwoTone" />

<!-- Material Icon Image Extension -->
<Image Aspect="Center" Source="{material:Icon Icon=AddRoad, Variation=TwoTone}"/>

<!-- Material Symbol Image Extension -->
<Image Aspect="Center" Source="{materialSymbols:Symbol Icon=Add, Variation=Rounded}"/>

<!-- Material Symbol Label Extension -->
<Label Text="{materialSymbols:Symbol Icon=Add, Variation=Rounded}" FontSize="32" TextColor="Red" />

[AathifMahir]

@AathifMahir I think we can update the documentation with a few screenshots and samples, so devs can read the documentation and install the proper package. Also, this will be beneficial in terms of versioning, because Google is releasing new Symbols and updating current ones, so versioning of the package will be better, so you know which font really was updated. These may not be updated very often, but maybe every 2 months or so.

I also think you can give it a try to do it in packs as you mentioned and we can test and see if the final app sizes grows too much or no. Maybe this will be the best option, we can try and learn from it. If we pack them by type, we can do something like this:

• AathifMahir.Maui.Core
• AathifMahir.Maui.Icons.Fluent.Segoe
• AathifMahir.Maui.Icons.Fluent.OpenSource > This contains the Outlined and Filled versions
• AathifMahir.Maui.Icons.MaterialIcons > This contains the Outlined, Filled, Rounded, TwoTone versions
• AathifMahir.Maui.Icons.MaterialSymbols This contains the Outlined, Rounded versions

XAML usage sample

xmlns:fluent="clr-namespace:MauiIcons.Fluent;assembly=Maui.Icons.Fluent.OpenSource"
xmlns:material="clr-namespace:MauiIcons.Material;assembly=Maui.Icons.MaterialIcons"
xmlns:materialSymbols="clr-namespace:MauiIcons.Material;assembly=Maui.Icons.MaterialSymbols"

<!-- Fluent Icon Control -->
<fluent:Icon Icon="Accounts" Variation="Outlined" />

<!-- Fluent Icon Image Extension -->
<Image Aspect="Center" Source="{fluent:Icon Icon=ActionCenterQuiet, Variation=Outlined}"/>

<!-- Material Icon Control -->
<material:Icon Icon="ABC" Variation="TwoTone" />

<!-- Material Icon Image Extension -->
<Image Aspect="Center" Source="{material:Icon Icon=AddRoad, Variation=TwoTone}"/>

<!-- Material Symbol Image Extension -->
<Image Aspect="Center" Source="{materialSymbols:Symbol Icon=Add, Variation=Rounded}"/>

<!-- Material Symbol Label Extension -->
<Label Text="{materialSymbols:Symbol Icon=Add, Variation=Rounded}" FontSize="32" TextColor="Red" />

Sure thing, will start working on it as soon as possible

[AathifMahir]

@vhugogarcia Added Variant Support for Material Icons with v1.2.0-pre, The Build is Now Available in NuGet or you can download on release page, feel free to test it out and let me know. When it comes to Material Symbols Support, I'm Already Working on it and Will be Available Soon

[vhugogarcia]

Thanks @AathifMahir I will take a look today

[AathifMahir]

Thanks @AathifMahir I will take a look today

I need more information on Material Symbols, As far as my research on Material Symbols, It does have Properties to Set Optical Size, Weight and Grade. Do we need those features too?

As far as implementing the above properties, we need to go through complex roots on having multiple font files with different optical size, weight and grade.

Tldr: it would increase dll size.

But let's forget the size, Do you think you would use those properties and also others would use it as well?

[AathifMahir]

Started a Discussion on This Issue, Feel Free to Go Ahead and Post Your Feedbacks. The Discussion Contains Initial Plan on Implementing the Variable Font Based Material Symbols

Visit the Discussion

[AathifMahir]

@vhugogarcia Hey, If you have little time to implement this, Feel free to open PR on the implementation, I can't seem to find any free time in the recent days

[vhugogarcia]

Hello @AathifMahir I really apologize for not being able to test it. I got very busy at work and family stuff and I could not get a chance to get it to test it.

I hope to get sometime free by the end of the week and count with me for testing and of course contribute as much as I can 😎🙂👍🏻

[AathifMahir]

Hello @AathifMahir I really apologize for not being able to test it. I got very busy at work and family stuff and I could not get a chance to get it to test it.

I hope to get sometime free by the end of the week and count with me for testing and of course contribute as much as I can 😎🙂👍🏻

Sure, Hope I can implement this within the next few weeks or within a month

[vhugogarcia]

Hello @AathifMahir , I have forked the project, downloaded it and tested it on macOS, iOS and Android and the new Material Icons variants are working pretty cool!

However, I found 1 thing that confused me when trying to use the nuget package.

1. When I installed the AathifMahir.Maui.MauiIcons.Material I was expecting to use the namespace: AathifMahir.Maui.MauiIcons However, I noticed that is not true, it is in real MauiIcons only the namespace where it starts with.

So, my recommendation is either update the namespaces from the entire project to match a more modern and simplified naming convention such as:

AathifMahir.Maui.Core
AathifMahir.Maui.Icons.Fluent.Segoe
AathifMahir.Maui.Icons.Fluent.OpenSource > This contains the Outlined and Filled versions
AathifMahir.Maui.Icons.MaterialIcons > This contains the Outlined, Filled, Rounded, TwoTone versions
AathifMahir.Maui.Icons.MaterialSymbols This contains the Outlined, Rounded versions

or add your name AathifMahir to the namespaces, otherwise, it is kind of confusing how to start with the package. I found it how to use it by checking the sample included in the repository.

I just wanted it to highlight, however, I did not want to change anything until I hear from you what do you think about it. Other than that! it worked very very nice!

Thanks for release it! it will help us a lot!

[AathifMahir]

Hello @AathifMahir , I have forked the project, downloaded it and tested it on macOS, iOS and Android and the new Material Icons variants are working pretty cool!

However, I found 1 thing that confused me when trying to use the nuget package.

1. When I installed the AathifMahir.Maui.MauiIcons.Material I was expecting to use the namespace: AathifMahir.Maui.MauiIcons However, I noticed that is not true, it is in real MauiIcons only the namespace where it starts with.

So, my recommendation is either update the namespaces from the entire project to match a more modern and simplified naming convention such as:

AathifMahir.Maui.Core
AathifMahir.Maui.Icons.Fluent.Segoe
AathifMahir.Maui.Icons.Fluent.OpenSource > This contains the Outlined and Filled versions
AathifMahir.Maui.Icons.MaterialIcons > This contains the Outlined, Filled, Rounded, TwoTone versions
AathifMahir.Maui.Icons.MaterialSymbols This contains the Outlined, Rounded versions

or add your name AathifMahir to the namespaces, otherwise, it is kind of confusing how to start with the package. I found it how to use it by checking the sample included in the repository.

I just wanted it to highlight, however, I did not want to change anything until I hear from you what do you think about it. Other than that! it worked very very nice!

Thanks for release it! it will help us a lot!

Thanks for testing on multiple devices, as far as namespaces, I was aware of that and I was looking to change that but I'm concerned with breaking some of the apps because of this change, I might need to take a look further on how to bring this change without affecting some of the users. Or I'm planning to bring these changes with v2 which would contain a couple of other breaking changes too

[vhugogarcia]

Material Symbols were added on the recent versions of the package. Please feel free to close this ticket @AathifMahir I created this ticket long time ago and it is now covered. 😃

[AathifMahir]

Material Symbols were added on the recent versions of the package. Please feel free to close this ticket @AathifMahir I created this ticket long time ago and it is now covered. 😃

I guess, you have confused with Material 2 Icons and Material 3 based Symbol Icons, The Material Symbol with Variable Font is still work in progress. What we did for v2 is we decoupled Material 2 Icon Variants into different packages. This issue is still work in progress and I'm looking to add Material Symbols with Next Major Update to MauiIcons 🤞

Edit: We are looking at around 3 or 4 new icon modules based Material Symbol Icons