Iconos de material design con Buefy

Los iconos de material design de Google son muy populares y se pueden integrar en varios frameworks o diseños.

Hoy vamos a ver cómo usar los material icons en el framework Buefy, que es Bulma CSS con Vue.

Inicio

Si no sabes cómo usar Buefy, mira mi post sobre la introducción a Buefy.

Instalar iconos

Ahora que ya tienes un proyecto, instala los iconos con npm así:

npm install --save @mdi/font

Espera a que termine la instalación y después, en tu archivo main.js, importa los iconos con:

import '@mdi/font/css/materialdesignicons.css'

Como ejemplo dejo mi archivo main.js, presta atención a la línea 3:

import Vue from 'vue'
import App from './App.vue'
import '@mdi/font/css/materialdesignicons.css'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import router from "./router"

Vue.use(Buefy);
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    router,//<-- Aquí el router
}).$mount('#app');

Eso es todo lo que necesitamos, pues por defecto Buefy usará los iconos de material design.

Usar iconos

Cuando hayas instalado los iconos puedes usarlos a través del componente b-icon. Para buscar los iconos ve a la página de Material Design Icons y busca el nombre del icono que quieres usar.

En este caso usaré el icono llamado account-plus y es así:

<b-icon icon="account-plus"/>

Recuerda que puedes usar variaciones de tamaño a través del atributo size. En mi caso he colocado el icono dentro de un botón:

<b-button :loading="cargando" @click="mostrarModalAgregarAlumno=true" type="is-primary">
    <b-icon icon="account-plus" size="is-small"/>&nbsp;
    Nuevo
</b-button>

Con el siguiente resultado:

Otra ventaja que tenemos al usar este paquete de iconos es que las alertas y componentes predeterminados los usarán y no tenemos que configurar manualmente el paquete.

Conclusión

Dejo un enlace a la documentación oficial de buefy.