Support for Icon Fonts

[robinmanuelthiel]

[acaliaro]

this should be a dream!

[acaliaro]

I try for this... can I?

[robinmanuelthiel]

Yeah, please feel free do. Would love to see a PR on this. I was looking at font-awesome. Ping me here if you need any help or code explanations!

[acaliaro]

do you think is it possible to use https://github.com/jsmarcus/Iconize

[robinmanuelthiel]

It would be possible to leverage Jeremy's work for sure. But I want to keep the dependencies of this library as few as possible. So I would prefer to implement it as shown here: https://forums.xamarin.com/discussion/31530/fontawesome-label-heres-how

[acaliaro]

@robinmanuelthiel is it now possible to use Icon Fonts?

[julianpaulozzi]

If you want to display only the icon with Iconize this behavior should work:

    public class FlexButtonFontIcon
    {
        public static readonly BindableProperty IconProperty =
            BindableProperty.Create(
                @"Icon",
                typeof(string), 
                typeof(FlexButtonFontIcon), 
                default(string),
                propertyChanged: IconPropertyChanged);
        
        public static void SetIcon(BindableObject view, string value)
        {
            view.SetValue(IconProperty, value);
        }

        public static string GetIcon(BindableObject view)
        {
            return (string)view.GetValue(IconProperty);
        }

        private static void IconPropertyChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            var iconKey = newvalue as string;
            if (!(bindable is FlexButton view) || string.IsNullOrWhiteSpace(iconKey))
                return;
            
            var icon = Iconize.FindIconForKey(iconKey);
            if (icon != null)
            {
                var iconModule = Iconize.FindModuleOf(icon);
                view.FontFamily = $"{iconModule.FontPath}#{iconModule.FontName}";
                view.Text = $"{icon.Character}";
            }
        }
    }

Then just add on button:

<flex:FlexButton local:FlexButtonFontIcon.Icon="icon-name" FontSize="26"/>

[acaliaro]

WoW

[hellyab]

I am setting the Icon using FontImageSource and it works just fine. Followed this article by @jamesmontemagno to add the Font Icons to my project. <flex:FlexButton.Icon> <FontImageSource Glyph="&#xe902;" FontFamily="{StaticResource MaterialFontFamily}"/> </flex:FlexButton.Icon>