# Poner iconos/imagenes en Button y Label de Google Earth Engine

En esta entrada se muestra como como poner imagenes/iconos a los Button y Label usando el argumento *imageUrl*. 

Los iconos que vamos a usar se encuentran en esta liga: [https://fonts.google.com/icons?icon.platform=web&icon.style=Outlined&icon.set=Material+Icons](https://fonts.google.com/icons?icon.platform=web&icon.style=Outlined&icon.set=Material+Icons)

![Camptura3.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1662929378442/HmEdlxyI5.PNG align="left")

Los pasos a seguir son:
**1. ** Si vamos a poner imagenes en diferentes partes de nuestra App de GEE, nos conviene crear una función en donde nadadas se pida el nombre del icono. Esto es:
```
//Icons
var IconName= function(Name){ 
    return 'https://fonts.gstatic.com/s/i/materialiconsoutlined/'+Name+'/v11/24px.svg'
}
```
El nombre (***Name***) lo encontramos al dar clic en cualquier icono. Aparece una sección en la parte derecha donde aparece  aparecen cuatro pestañas, seleccionamos la pestaña ***web*** y aparece unas líneas de código donde solo debemos tomar, la parte que esta marcado de amarillo en la siguiente imagen.

![Icono.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1662954011784/ChJjGdOvG.PNG align="center")


**2.** Ahora, lo que resta es poner ***Button*** o *Label* en nuestra App y mandar a llamar la funcion indicando el nombre del icono en el argumento ***imageUrl***. 

```
//Creamos un Label
var ImgLabel = ui.Label({
  value: 'Ayuda',
  imageUrl:  IconName('help_outline'),
})

//Creamos un botón
var ImgButton = ui.Button({
  label: 'Cerrar',
  imageUrl: IconName('close'),
  onClick: function(){Map.add(Box.INDICE_PANEL)}
});
//Creamos un Label
var ImgMLabel = ui.Label({
  value: 'Minimizar',
  imageUrl:  IconName('minimize'),
})
Map.add(ImgLabel)
Map.add(ImgMLabel)
Map.add(ImgButton)
```

El script de ejemplo se puede consultar [aquí](https://code.earthengine.google.com/b43dbe6a3ec942f00435c5198ef80991).