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:

See the gist on github.

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í:

See the gist on github.

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:

See the gist on github.

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.