Add feature to MauiIcons to return Font Icons as strings

[mobilewares]

Hey

Thanks for providing this component for MAIU - have found it quite useful so far.

Just a feature request to make it even more useful - would be great to have an easy way to use this to feed the Icons (and font family) back as string (character codes) so we can assign them to Text/Content properties of various controls such as buttons/labels and other places.

One scenario this would be particularly useful for buttons right now given the MAIU ImageButton/Button rendering of the image is pretty flakey and formatting options very limited (whereas with the text we at least get some nice controls over alignment and padding). Would also be great for many other controls too.

For example - have something like this :

<Button .... FontFamily="{SomeStaticResource pointing to font in your component}">

<-- (This would simply return back the Unicode character for the specified icon). < /Button> I'm normally doing this right now by having my own FontFamily StaticResources in the App.xaml along with some staticresource with the hex codes for the characters. This of course means I need to include the font in the manifest and reference it in the MauiProgram.cs. However, would be great to have that simplicity in example above & not have to duplicate up the importing of the Icon font. Also similar to this - support this sort of thing in code behind too (ie. return string via some extension method so we can use the enum to resolve what icon we want) - as I sometimes will be building up arrays of buttons/contents via code and want to be able to assign values to string properties too. If your component already does this and I missed it apologies - couldn't find anything other than examples/controls/extensions for bringing back Icons as images. cheers Niall

[AathifMahir]

I guess, this feature is totally viable. I'll add this feature to the next release milestone

[AathifMahir]

There's a problem on implementing this approach since returning only Unicode of the icons won't make them appear, we need to specify Font Family, in this case if we return Unicode as string, The Icon won't appear and we need to explicitly to specify the font family in button font family property, I guess that's not viable in this case.

I thought of couple of options but those doesn't seems viable in this case:

• One Approach i thought is using label as base and extend with Maui Icon Control but That doesn't cover your requirement since Text Property on Button is String not an Object which accepts Label Control,
• Another Approach which uses Markup Extension and return Unicode of the icons but that also has the same issue where we need to explicitly specify the Font Family.

I guess passing down the Icon to ImageSource property in Button via Markup Extension is Current Option or Else I'm happy to hear any viable alternative to this from you

eg:

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

<Button ImageSource="{fluent:Icon Icon=Alert20, IconColor=Aqua}"/>

[mobilewares]

Hi -

I was assuming we'd need to pass in a value for the FontFamily for this to work - is there any way to reference it via StaticResource or is your font not currently wired in as recognized font (and doesn't have an alias set)?

Alternatively, is there a way to point to the path where your font is in MauiProgram.cs (ie. ConfigureFonts > fonts.AddFont) but put in a qualified path through to the ttf in your dll - or have your own extensions for this? If that was possible (and a prerequisite) then it should then theoretically be referenceable via the alias you set in here.

I think there are a few Nuget packages out there which simply make other icon fonts available to your App (not really checked how they integrate), so maybe having a look at their source code and seeing if they have a good technique for this?

Unfortunately having it come back as an icon/image is the thing I am trying to avoid here as that's where MAUI isn't very good and gives very mixed results right now.

Other thought is that (worst case/fallback) I'd be happy to still include a duplicated .ttf font file(s) in the main App and add reference to it in MauiProgram.cs. The thing that your component would really help with is if it could simply pass back the unicode character string for when you specify a known Icon from your enums - and then we just set the FontFamily as per normal (with assumption that font/alias has been loaded in via this extra duplicated reference).

thanks Niall

[AathifMahir]

Hi -

I was assuming we'd need to pass in a value for the FontFamily for this to work - is there any way to reference it via StaticResource or is your font not currently wired in as recognized font (and doesn't have an alias set)?

Alternatively, is there a way to point to the path where your font is in MauiProgram.cs (ie. ConfigureFonts > fonts.AddFont) but put in a qualified path through to the ttf in your dll - or have your own extensions for this? If that was possible (and a prerequisite) then it should then theoretically be referenceable via the alias you set in here.

I think there are a few Nuget packages out there which simply make other icon fonts available to your App (not really checked how they integrate), so maybe having a look at their source code and seeing if they have a good technique for this?

Unfortunately having it come back as an icon/image is the thing I am trying to avoid here as that's where MAUI isn't very good and gives very mixed results right now.

Other thought is that (worst case/fallback) I'd be happy to still include a duplicated .ttf font file(s) in the main App and add reference to it in MauiProgram.cs. The thing that your component would really help with is if it could simply pass back the unicode character string for when you specify a known Icon from your enums - and then we just set the FontFamily as per normal (with assumption that font/alias has been loaded in via this extra duplicated reference).

thanks Niall

Font is already added to the application using the builder extension, that's not an issue. The issue here is we need to explicitly specify the font family in the button font family property, in that case I assume most devs would forget to include font family alias in the button. Of course we can include a StaticResource for font family aliases.

If you think you don't find explicitly setting font family every time for button using StaticResource is an issue. I won't mind implementing a markup extension that returns Unicode of the icons as string

eg:

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

<Button Text="{fluent:Text Icon=Alert20}" FontFamily="{StaticResource FluentIcons}"/>

[mobilewares]

Hi -

Yes that's no problem at all to specify the font family and I think other devs will be fine as well. Typically (in my existing Applications where I do this) - for buttons I have a base style for these sort of buttons so I will just define it once in there (along with other properties I use like padding, FontSize, Width/Height Request, Colors etc). I suspect others would do this as well.

The part that you will be making much easier for devs (like with your imagesource) is simply to provide a way of not having to use CharMap (or similar) to find and look up an icon unicode.

If you do want to simplify it further however, another trick is you could do also do that I've often used for UWP & Xamarin in the past is to offer an Attached Property - and that way you can actually set other properties (like FontFamily) for that element. You would just need to check for certain common types in your code, even if you didn't handle all the possible types you could offer some OOB support for Button/Label etc :

ie.
< Button FluentIcons.IconText="Alert20" /> then in code behind : if (element is Button) {(element as Button).FontFamily = 'FluentIcons'; (element as Button).Text = "ResolvedCharacterForAlert20"; }

[AathifMahir]

@mobilewares Created a PR on this Issue, Already Implemented Extension to Return Unicode of the icons, Currently Looking At Possibilities of Specifying Font Family using Static Resource or Equivalent

[AathifMahir]

@mobilewares Released Preview Build with This Feature, feel free to install the preview version of AathifMahir.Maui.MauiIcons.Core Package on your Project and Test the Feature, as far as Feature it Doesn't Implement any new extension, it does use the same Icon Markup Extension but Returns Unicode and Sets Font Family Automatically, you don't need to set the font family explicitly anymore, I would love to hear your feedback on this.

Eg:

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

<Button Text="{mauiIcon:Icon Accessibility28}"/>

[AathifMahir]

Hello @mobilewares

We currently working on v4 of MauIcons, Currently we are in the middle of Deciding Whether to Keep this feature + workaround in MauiIcons v4, Since I believe that this issue is Fixed in the Latest Version Maui aka Maui 8 SR7 and Additionally you can use ImageButton to Have More Customization.

We would really appriciate, if you can go through this again and provide a feedback