Material Design iconography in Vue 3 with Oruga UI
Material Design is a design template used by Google that has been developed to create visual and consistent user interfaces and is used on different platforms such as Android. Material Design draws on design principles such as depth, light and motion, shadows, animations, and transitions to create a sense of depth and realism in user interfaces, with the goal of providing an engaging and intuitive user experience.
Vibrant colors and legible typography are also used to improve readability and accessibility and as you can guess, it also uses a very minimalistic set of icons that we can use, which is what we are going to talk about in this post.
Now with our project created in Vue 3, in these guides it would be with Laravel, although you can follow the same steps with Vue Cli, we are going to install an iconography to be able to use the icons in Vue with Oruga UI.
In this case, it will be Google's Material Design:
For the iconography, we will use MaterialDesign:
$ npm install @mdi/fontAnd we reference it:
resources/js/vue/main.js
//Material Design
import "@mdi/font/css/materialdesignicons.min.css"With this, you can use any of the icons that you can find on the official website:
https://materialdesignicons.com/
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter