Font Material Design Icons en Xamarin Forms

¡Hola! Quiero compartir con ustedes la manera que use para integrar la fuente de Material Design Icons en los proyectos de Xamarin Forms. Iniciemos:

1.- Lo primero que necesitamos es descargar los archivos de la fuente de Material Design Icons

Descarga aquí
Una vez que tengamos el .Zip procedemos a tomar el archivo materialdesignicons-webfont.ttf que se encuentra dentro la carpeta ? fonts.

 

2.- Ahora en nuestro proyecto agregamos una carpeta Fonts para agregar el archivo materialdesignicons-webfont.ttf

Imagen de ejemplo de creación de carpeta fonts

Seguidamente asignaremos en las propiedades del archivo el Build Action a Embedded resource

Ejemplo de imagen para asignar el embedded resource

3.- Debemos agregar nuestro recurso .ttf en Android y iOS

Android: Lo agregamos en la carpeta assets, y asignamos el BuildAction a AndroidAsset.

Ejempplo de asset android

iOS: La agregamos en el proyecto y asignamos el BuildAction BundleResource.

4.- Lo siguiente es convertir nuestro archivo .ttf  a una clase, para esto les recomiendo la herramienta IconFont2Code . En esta herramienta solo cargamos nuestro archivo .ttf y nos regresara una clase de c#.

Este contenido lo copiaremos en a nuestro proyecto. Creamos la carpeta Helpers y agregamos una clase que llamaremos  IconFont.cs

5.- Es importante que agreguemos la familia de fuentes en nuestro archivo de App.xaml

<OnPlatform x:Key="MaterialFontFamily" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>

6.- Ahora deberemos agregar en nuestro archivo AssemblyInfo.cs el siguiente código:

[assembly: ExportFont("materialdesignicons-webfont.ttf", Alias = "MaterialFontFamily")] 

7.- Teniendo listo todo lo anterior ahora solo será necesario agregar en nuestra archivo .xaml nuestro helper.

xmlns:helpers="clr-namespace:SMarT.APP.User.Helpers"

Y listo, ya tienes material icons en tu proyecto de Xamarin Forms, te dejo unos ejemplos de como puedes utilizarlo en algunas etiquetas, recuerda que esto te ayuda ahorrar el peso de tu aplicación.

Image Button
Button
Label

Font Material Design Icons en Xamarin Forms

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *