Iconografía Material Design en Vue 3 con oruga UI

El Material Design es una plantilla de diseño utilziada por Google que ha desarrollado para crear interfaces de usuario visuales y consistentes y es empleada diferentes plataformas como Android. Material Design se basa en principios de diseño como la profundidad, la luz y el movimiento, sombras, animaciones y transiciones para crear una sensación de profundidad y realismo en las interfaces de usuario, con el objetivo de proporcionar una experiencia de usuario intuitiva y atractiva.

También se utilizan colores vibrantes y tipografía legible para mejorar la legibilidad y la accesibilidad y como puedes suponer, tambien emplea un conjunto de íconos muy mimimalistas que podemos emplear que es lo que vamos a hablar en esta entrada.

Ya con nuestro proyecto creado en Vue 3, en estas guías sería con Laravel, aunque puedes seguir los mismos pasos con Vue Cli, vamos a instalar una iconografía para poder usar los iconos en Vue con Oruga UI.

En este caso, será la de Material Design de Google:

Para la iconografía, usaremos MaterialDesign:

$ npm install @mdi/font

Y lo referenciamos:

resources/js/vue/main.js
//Material Design
import "@mdi/font/css/materialdesignicons.min.css"

Con esto, puedes usar cualquiera de los iconos que puedes encontrar en la web oficial:

https://materialdesignicons.com/