Como usar Material Icons con React
Hola, bienvenidos a este post donde veremos como trabajar con “icon”, que es un componente del framework material UI.
Como introducción, Material UI es un framework que nos permite usar algunas herramientas para mejorar el interfaz de nuestra página.
Una de estas herramientas de la que disponenemos es el componente “icon”, que nos permite usar iconos en nuestra página web, a continuación se explicará como implementar Material y como usar el componente mencionado desde cero. Necesitamos la aplicación cmder ( también sirve la consola de windows ) y Visual Studio Code.
Material funciona con React, por lo tanto en cmder nos dirigiremos al directorio donde queramos el proyecto de react, usaremos el comando: npx create-react-app NOMBREPROYECTO, como se muestra a continuación:
Una vez ya tenemos instalado el proyecto de React, ahora nos situaremos dentro del proyecto de React que hemos creado, en mi caso:
Ahora procederemos con la implementación de Material UI, tenemos dos formas de hacerlo podemos usar yarn (yarn add @mui/material) o bien npm (npn install @mui/material). Yo he usado yarn.
Ahora instalaremos el componente icon, tenemos dos formas de hacerlo, podemos instalar iconos como SVG, o bien usar un CDN de google. Empezare con la primera:
Para instalar iconos como svg agregaremos el siguiente comando (si en el paso anterior usamos npm, continuaremos con npm con todos los comandos) :
Por ultimo agregaremos dos modulos más al proyecto para que funcione con este comando:
De forma opcional, podemos instalar bootstrap, yo lo he usado para darle un mejor estilo a la explicación, no es necesario pero dejo los comandos por si alguien quiere tenerlo:
Ya tenemos todo listo para trabajar, ahora escribiremos en la consola ‘code .’, se abrirá Visual Studio Code y tendremos las carpetas del proyecto.
Los únicos archivos que usaremos serán index.html y el más importante, App.js, cade destacar, que yo voy a trabajar en el componente App.js si se quisiera implementar Material Icon en otro componente se podría hacer perfectamente.
Vamos a limpiar un poco el componente App para trabajar:
(Importo bootstrap)
Antes de comenzar con la importación de iconos, quiero comentar que hay dos formas de cargar iconos en nuestra página, una será mediante SVG y la otra es mediante span, explicaré las dos formas, y posteriormente comentaré las diferencias entre ellas. Comenzamos!.
Vamos a empezar cargando iconos como SVG en nuestra página, para ello nos dirigiremos a la página oficial de material (https://mui.com), clicaremos sobre “Get Started”.
En la barra de de la izquierda, clicaremos sobre “components”.
En la lista que se nos despliega bajamos y buscamos “Icons”, también nos quedaremos con la opcion “Material Icons” puesto que posteriormente la usaremos.
Continuamos clicando sobre “Icons” y si bajamos un poco en la ventana que se nos abre, llegaremos a este apartado:
Vamos usar un icono de papelera como ejemplo, para ello clicaremos sobre la opcion que nos abrirá el código:
Se nos desplegará lo siguiente:
Para mostrar un icono necesitamos importarlo primero, por lo tanto, vamos a coger por ejemplo el import que esta subrayado el rojo:
Nos lo llevamos a nuestra página.
Y lo llamamos:
Podemos cambiar diferentes propiedades de los iconos, como el color, el tamaño etc.
Tenemos unos ejemplos de esto en la página oficial:
Como podemos observar he modificado el color y el tamaño del segundo icono:
Y el resultado sería:
Como he dicho antes, mediante este metodo cargaremos iconos como SVG, ahora explicaré como cargarlos con span.
Para cargarlos como span, necesitaremos lo primero, un CDN de google, que se encuentra en la página oficial de material, en el apartado componets > icons (del menu de la izquierda), y si bajamos un poco veremos lo siguiente.
Copiaremos lo que esta marcado en rojo, nos dirigiremos a nuestro proyecto de react, entraremos en la carpeta public y clicaremos sobre el archivo index.html.
Pegaremos el link que copiamos antes en el head, debajo de todos los links que ya existían y antes del titulo de la página, como se puede ver en la imagen:
Ahora en nuestro componente, en mi caso recordamos que es App.js, deberemos importar “Icon” de la siguiente forma:
Y para cargar el icono, entre etiquetas <Icon> escribiremos el nombre del icono:
¿Cómo podemos saber el nombre de los iconos?
Iremos a la página oficial, iremos al componente Material Icons (componets > Material Icons), buscaremos un icono que queremos yo voy a cargar una estrella.
Una vez sepamos que icono queremos cargar clicaremos sobre él, nos saldrá la ventana con el import que ya vimos antes, pero esta vez, no vamos a copiar el import, vamos a fijarnos en la url, al final veremos cual es el nombre del icono, como se muestra a continuación:
Ahora que ya sabemos el nombre del icono, lo pondremos dentro de las etiquetas <Icon>, pero todo en minusulas.
Como podemos ver:
A continucación, voy a comentar una duda que nos puede surgir a la hora de importar ciertos iconsos de esta manera, como he dicho el nombre del icono debe de ir todo en minusculas, voy a coger otro icono:
Como vemos es un nombre compuesto “AddReaction”, bueno vamos a cargarlo como hemos hecho antes, todo en minúsculas:
No se ha cargado el icono que nosotros queremos, y eso es porque cambia la nomenclatura con este tipo de iconos.
Debemos escribirlo todo en minúsculas, pero antes de la R mayuscula ( en este caso, si hubiera mas mayusculas, antes de cada una debe ir una barra baja), debe de ir una barra baja:
*Aclaratorio: si el icono fuera AccessTimeFilled, se escribiría de la siguiente forma: access_time_filled.
Ahora que ya he explicado las dors formas de cargar iconos que tenemos, voy a explicar las diferencias que hay entre ellas:
La primera y mas evidente como ya dije antes es que unos iconos son svg y otros span, esto lo podemos si al ejecutar nuestro proyecto hacemos click derecho sobre la pantalla, clicamos sobre Inspeccionar:
Y sobre la pestaña Elements, buscamos donde estan los iconos que hemos cargado y podremos ver que depende de lo que hayamos usado unos seran span y otros SVG:
La siguiente diferencia, es que si tuvieramos muchos iconos cargados con span, la página podría tardar mas en cargar, es por esto que usar svg, es lo más recomendado puesto que hace que nuestra página sea mas liviana.
Y por ultimo, hay ciertos iconos que al cargarlos con la etiqueta <Icon> no se mostraran y eso es porque no estan soportados de momento.
La siguiente funcionalidad que vamos a ver es como usar iconos dentro de los propios botones de Material UI.
Lo primero que haremos será cargar un boton, para ello nos dirigimos a la página oficial de Material y en el menu de la izquierdas iremos a components > button:
Al entrar nos aparecerá lo siguiente, clicaremos sobre el boton marcado rojo y veremos el código:
Copiaremos el import de “Button” y vamos a coger el boton “Outlined” por ejemplo:
Pegamos el import en la parte superior de nuestro componente:
Y donde nosotros pegamos el botón que copiamos anteriormente:
En la página, se vería de la siguiente manera:
Vamos a continuar agregando un icono dentro del boton, agregaré un icono de una papelera dentro del boton, antes realizaré unos cambios en el boton, le cambiaré el texto y el color:
Se verá de la siguiente manera:
Podemos cargar el icono dentro del boton es dos posiciones a la izquierda del texto o a la derecha, comenzaré cargandolo por la izquierda:
Si recordamos yo al principio, cargue un icono de una papelera:
Pues lo que haré sera llamarlo en el boton dentro de la propiedad “startIcon” seguido de igual y entre llaves, esto colocará el icono a la izquierda del texto.
El resultado será el siguiente:
Para cargarlo a la derecha del nombre, haremos lo mismo crearemos un botón:
Para este ejemplo he usado otro icono:
Y esta vez llamaremos al icono entre la propiedad “endIcon”, y dentro de las etiquetas llamo al icono:
El resultado sería:
Tambien podemos cargar iconos como span dentro de los botones, se hace de la misma manera, vamos a verlo.
Cargamos otro boton más:
Vamos a usar el icono que cargamos anterioremente de “add_reaction”:
Dentro del boton, pondremos la propiedad startIcon o endIcon depende de donde queramos el icono, y simplemente copiamos toda la etiqueta <Icon> y la pegamos dentro de la propiedad:
Y quedaría así:
La ultima funcionalidad que vamos a ver es como cargar iconos como botones:
Para hacer esto necesitamos importar una herramienta de la página oficial de Material, iremos a la barra de busqueda dentro de la página de Material:
Escribiremos “IconButton”
Entraremos en la primera opción que nos sale y nos mostrará algo como esto:
Como podemos observar podemos importarlo de dos formas distintas, usaremos la que queramos, yo usaré la primera.
Iremos a nuestro componente y pegaremos el import en la parte superior:
Para realizar el ejemplo voy a usar el icono:
Crearemos la etiqueta <IconButton>, y dentro al igual que hicimos con <Icon> llamaremos al icono:
El resultado sería:
Si clicamos encima veremos que tiene una animación para diferenciarlos de los iconos normales ( en el video acerca del post se muestra esto).
También podemos cargar un icono como span como boton, simplemente llamaríamos al icono dentra de etiquetas <Icon> y a su vez dentro de las etiquetas <IconButton>, tal que así:
Y como podemos ver se mostraría así:
Autor: Adrián Rodríguez Tejedor
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
GitHub: https://github.com/adriantr0808/postyvideotutorialmaterialicon
Video: https://web.microsoftstream.com/video/c5d333b7-1a7c-48e3-8834-f25eb0c6bc91