robinmanuelthiel / flexbutton

Flexible button control for Xamarin.Forms
MIT License
240 stars 35 forks source link

Support for Icon Fonts #1

Open robinmanuelthiel opened 6 years ago

acaliaro commented 6 years ago

this should be a dream!

acaliaro commented 6 years ago

I try for this... can I?

robinmanuelthiel commented 6 years ago

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 commented 6 years ago

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

robinmanuelthiel commented 6 years ago

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 commented 6 years ago

@robinmanuelthiel is it now possible to use Icon Fonts?

julianpaulozzi commented 6 years ago

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 commented 6 years ago

WoW

hellyab commented 3 years ago

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>`