Iconos

Ionic incluye por defecto una selección de iconos que nos facilitarán el desarrollo de nuestras aplicaciones. Para utilizarlos usaremos la etiqueta "ion-icon" y el nombre del icono deseado. Estos iconos los podremos utilizar de forma separada o junto a otros componentes como botones, listados, tarjetas, cabeceras, etc.

Por ejemplo para añadir el icono de una alarma tendremos que escribir:

<ion-icon name="alarm"></ion-icon>

La apariencia del icono mostrada dependerá de la plataforma destino. Ionic detectará el dispositivo que está cargando la aplicación y seleccionará automáticamente el icono más adecuado. Por defecto incluye conjuntos de iconos para iOS y para el tema Material Design (md) de Android.

En caso de necesitarlo, podemos especificar de forma separa el icono a utilizar para cada plataforma usando los atributos "ios" y "md" y los mismos prefijos para el nombre del icono. Por ejemplo:

<ion-icon ios="ios-alarm" md="md-alarm"></ion-icon>

O en caso de que nos guste más el icono del tipo Material Design y lo queramos utilizar para todas las plataformas podríamos escribir "<ion-icon name="md-alarm"></ion-icon>".

Muchos de los iconos también incluyen una versión para iOS en la que se dibuja solamente el borde del icono. Para utilizarla tendremos que añadir el sufijo "outline" al nombre del icono, por ejemplo ios-alarm-outline.

Los tres tipos de iconos utilizados en este ejemplo se mostrarían como en la siguiente figura:

Para ver la lista completa de iconos disponibles podéis consultar la sección "Ionicons" de la documentación. En esta página, al pulsar sobre cada icono aparecerá las instrucciones de cómo utilizarlo.