Telerik UI for Xamarin Font Icons

Telerik font icons is a collection of small vector graphics used across the components from Telerik UI for Xamarin suite. Examples of using font icons include the expand and collapse indicators of Accordion, Expander and TreeView controls, filter and sort indicators of DataGrid control, and other.

This article will give an overview on how you can utilize the Telerik font icons in your app.

• Include the required Telerik Font file
• Add the font file path
• Choose between the available Telerik icons

Include the required Telerik Font file

1. The Telerik Font Icons are located in the telerikfontexamples.ttf file. There are two options you could use to get the .ttf file.

   • Download the telerikfontexamples.ttf file from Telerik UI for Xamarin Samples App GitHub repo.

   • Get the font file from the installation folder of Telerik UI for Xamarin - here is the path to the exact location: Telerik UI for Xamarin [version]\QSF\QSF.Android\Assets\Fonts

2. Include Telerik Font .ttf file into your application in the following locations:

   • Android project: Create Fonts folder inside the Android Assets and add the .ttf file there.

   • iOS project: Create Fonts folder inside the iOS Resources and add the .ttf file there.

   You'd also need to modify the info.plist file inside the iOS project with adding the following code:

       <key>UIAppFonts</key>
     <array>
       <string>Fonts/telerikfontexamples.ttf</string>
     </array>
   ```
   

   • UWP project: Create Fonts folder inside the UWP Assets and add the .ttf file there.

   Add the font file path

   As a final step you need to add the path to the Fonts inside the Resources of the App.xaml file of the Xamarin.Forms project:

   <Application.Resources>
       <ResourceDictionary>          
           <OnPlatform x:TypeArguments="x:String" x:Key="IconsFont">
               <On Platform="iOS">telerikfontexamples</On>
               <On Platform="Android">Fonts/telerikfontexamples.ttf#telerikfontexamples</On>
               <On Platform="UWP">/Assets/Fonts/telerikfontexamples.ttf#telerikfontexamples</On>
           </OnPlatform>
       </ResourceDictionary>
   </Application.Resources>
   

   Choose between the available Telerik icons

   You can choose any of the available Telerik Font icons:

   Telerik Font Icons
   sort descent		star-empty		filter	
   sort ascent		group		star	
   right-dir		dots vert		menu	
   check		cancel		dot	
   dot-3		down-dir		left-open-big	
   configure		search		up-dir	
   pattern		add		right-dir-outlines	
   info		down-dir-outlines		bin-solid	
   edit		copy		arrow-up	
   airplane		pdf		encoding	
   length		arrow-right		contacts	
   cog-outlines		type		location	
   link		archive		bin	
   draft		folder-open		folder	
   group		item		sent	
   spam		warning		lock	
   thickness		car		shopping-bag	
   coffee-cup		get-money		shopping-user	
   group users		dashboard		location	
   link		assets		book	
   design		graphics		image	
   font-size		template		wireframes	
   distance		stopwatch		play	
   cancel		picture		text	
   code		analysis		network	
   network		bar-chart		sap	
   dba		home		temperature	
   phone		electricity		wifi	
   distance-horizontal		calendar dayview		calendar multiday	
   calendar week		calendar month		calendar year	
   calendar selection single		calendar selection multiple		calendar selection range	
   gallery		camera		crop free	
   crop original		crop rect		crop circular	
   badge		notes		time	
   calendar agenda		arrows		video-camera	ງ
   check		cancel		time	
   arrow-down		flag		save	
   share		menu-custom		heart-filled	
   heart-empty		reorder		arrow-box-left	
   arrow-box-right		bell-empty		chat	
   phone		menu		link-external	
   plus-squared		angle-left		angle-right	
   angle-up		angle-down		spinner	
   angle circled left		angle circled right		minus-squared	
   minus squared		plus squared		emoji	

   You need to set the Telerik Font icon code on the concrete property to visualize the icon.

   Examples

   Let's for example change the default icon of the RadDataGrid OptionsButton, used to display the DataGrid Filtering UI with one of the above listed icons (configure icon). DataGrid provides HeaderStyle property for its columns and the DataGridColumnHeaderStyle exposes OptionsButtonText property responsible for the OptionsButton icon.

   The configure icon's code ends with e80f; so this string should be applied to the OptionsButtonText property:

   <telerikGrid:DataGridTextColumn.HeaderStyle>
   <telerikGrid:DataGridColumnHeaderStyle OptionsButtonText="&#xe80f;"/>
   </telerikGrid:DataGridTextColumn.HeaderStyle>
   

   Here is the result:

   

   See Also

   • How To Set a Theme
   • Themes Overview