En este post vamos a ver cómo usar los iconos de Material design en nuestros proyectos web al usar Vue 3.

Te voy a mostrar una manera en la que al final vas a incluir en tu proyecto solo los iconos que has usado, haciendo tu software mucho más ligero.

Para tener los Material design icons en Vue 3 vamos a usar el paquete vue-material-design-icons que a su vez es simplemente una colección de componentes de Vue que usan los Material Design Icons.

Instalando vue-material-design-icons

Básicamente vamos a seguir la guía del paquete. Primero instalamos con:

npm i vue-material-design-icons

Usando iconos

Ahora que tenemos instalado el paquete de iconos MDI con Vue solo es cuestión de importar el icono como si fuera cualquier otro componente de Vue.

Para ver todos los iconos disponibles puedes navegar por la página de iconos: https://pictogrammers.com/library/mdi/

Por ejemplo, yo voy a usar el icono llamado loading (https://pictogrammers.com/library/mdi/icon/loading/), así que lo importo así:

import Loading from "vue-material-design-icons/Loading.vue";

Toma en cuenta que Loading será el nombre del icono y que no es obligatorio que tenga el mismo nombre, bien podrías importarlo así:

import IconoLoading from "vue-material-design-icons/Loading.vue";

Lo que sí es importante es la ruta del componente, que en este caso es Loading.vue.

Y luego en el template del componente úsalo así:

<Loading></Loading>

Para el caso de los iconos que se conforman de dos o más palabras, simplemente hay que convertir su nombre a Upper camel case. Por ejemplo, si el icono se llama account-key hay que importarlo así:

import IconoAccountKey from "vue-material-design-icons/AccountKey.vue";

Animando con Tailwind CSS

Como bonus quiero enseñarte que también puedes agregar clases a los iconos directamente en el componente. Siguiendo el ejemplo del icono que muestra el estado “cargando” se puede agregar la animación animate-spin si usas Tailwind, así:

<Loading  class="animate-spin"></Loading>

Guía completa

La guía escrita por el autor está en el siguiente enlace, ahí puedes encontrar más detalles sobre cómo cambiar el color y tamaño de los iconos Material design, entre otras cosas: https://www.npmjs.com/package/vue-material-design-icons