Xamarin Forms Icons

c# xaml xamarin xamarin.forms glyphicons
Connor Meeks picture Connor Meeks · Jun 9, 2017 · Viewed 12.8k times · Source

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:

enter image description here

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!

Answer

Kevin Le - Khnle picture Kevin Le - Khnle · Jun 9, 2017

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>

Related questions

Xamarin Forms Swipe Left/Swipe Right Gestures

I want to preface this by saying I'm completely new to mobile development, Xamarin, C#, .Net. I'm working on creating a mobile app using Xamarain Forms and have run into the problem of not having the swipe gesture available to …

Read More
How do overlap in Xamarin forms?

Does the concept of z-index? The picture shows that there is no overlap. How to set z-index? the top two custom select box <AbsoluteLayout Padding="10,10,10,10" VerticalOptions="FillAndExpand"> <ui:BoxSelector x:Name="selectorExchangs" AbsoluteLayout.LayoutBounds="0,0,0.5,0.3" AbsoluteLayout.LayoutFlags="All" …

Read More
Create a hyperlink using Xamarin.Forms (xaml and c#)

I am a relatively inexperienced professional programmer (I'm only 20 years old). Therefore, I apologize in advance as there may be some larger concepts that I do not fully grasp yet. I hope this is an appropriate question to ask, as …

Read More