Xamarin Forms Icons

Question

I'm wondering how I can implement icons inside my Xamarin Forms app. I want to use something like glyphicons or font awesome. However, I have no idea how to implement it into my xaml/c# pages.

Ideally, I am aiming for something like this:

If someone could provide the code to display an icon like the search bar or three lines, that would be great. I can format it to look pretty. I'm struggling with how to actually pull in the icon!

Solution 1

The easiest way may be is to use https://github.com/jsmarcus/Xamarin.Plugins

From Visual Studio or Xamarin Studio, install the following packages:

• Xam.Plugin.Iconize
• Xam.Plugin.Iconize.FontAwesome
• Xam.FormsPlugin.Iconize

Note: you can install Xam.Plugin.Iconize.Material and many others similar if you want to.

In the Android project, MainActivity class, OnCreate() method add

FormsPlugin.Iconize.Droid.IconControls.Init(Resource.Id.toolbar);
Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());

In the iOS project, AppDelegate class, FinishedLaunching() method, add similar lines

FormsPlugin.Iconize.iOS.IconControls.Init();
Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule())

Also, in the iOS project, info.plist add

<key>UIAppFonts</key>
<array>     
    <string>iconize-fontawesome.ttf</string>
</array>    

Now, in your XAML where you have your toolbar, in tag, add

<ContentPage ...
xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize" ...
>

and

<ContentPage.ToolbarItems>
    <iconize:IconToolbarItem Order="Primary" Clicked="..." Icon="fa-search" IconColor="White" />
</ContentPage.ToolbarItems>

Solution 2

Look at the new release of Xamarin Forms, the solution was made! I posted the anwser in https://stackoverflow.com/a/56257444/11305148

But there it go. The follow code works just fine:

<Button  Text="Pesquisar">
    <Button.ImageSource>
         <FontImageSource Glyph="&#xf002;" FontFamily="{StaticResource FontIcon}"/>
    </Button.ImageSource>
</Button>

And this too:

<ContentPage.ToolbarItems>
    <ToolbarItem>
        <ToolbarItem.IconImageSource>
             <FontImageSource Glyph="&#xf002;" FontFamily="{StaticResource FontIcon}"/>
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
</ContentPage.ToolbarItems>

Comments

[Connor Meeks]

will this work for Windows (UWP)? is there anything I have to do for those files?

[Connor Meeks]

will this work for Windows? or is this Android/iOS specific?

[Kevin Le - Khnle]

Not sure about Windows.

[Denny]

Tried this for UWP, and sadly it does not work for commandbar icons

[Josue Martinez]

I am visualizing the icons but it does nothing when I click it. in Iconlabel it is working fine. And also the toolbaritem for iOS is ok

[Ramesh]

@KevinLe-Khnle How to display this icon in Label text?

[Josue Martinez]

this is deprecated now