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/fontY 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/
- Andrés Cruz
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter