Mengubah Icon Font di Vuetify dari Material Icon menjadi Material Design Icon (mdi)

Jika anda membuat web app dengan menggunakan Vuetify, maka secara default aplikasi anda akan menggunakan Material Icon. Selain Material Icon, Vuetify juga mendukung Font Icon Material Design Icon, Font Awesome 5 dan Font Awesome 4. Nah, berikut ini adalah cara mudah untuk mengubah Icon Font dari Material Icon menjadi Material Design Icon.

Secara umum ada 2 cara untuk meng-"embed" icon font tersebut, yaitu dengan secara online menggunakan link ke cdn tertentu atau secara offline dengan cara meng-install npm package tertentu.

Vue+Vuetify : Menggunakan VDialog/v-dialog agar menjadi Promise based komponen

Jika anda menggunakan Vue dan Vuetify, maka VDialog/v-dialog mungkin adalah komponen yang selalu atau sering anda gunakan. Cara standar untuk menggunakan v-dialog adalah dengan menempatkannya menjadi satu pada halaman yang membutuhkan, lalu men-show-hide dialog dengan menggunakan v-model. Cara seperti ini sebenarnya dapat lebih disederhanakan lagi, yaitu dengan memisahkan dialog

Sinau CodingTukang Debug

Cara paling mudah untuk menambahkan font Material Design Icon adalah dengan menggunakan link cdn, yaitu dengan menambahkan link di bawah ini ke dalam index.html.

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>          

Alternatif lain adalah dengan menginstall font Material Design Icon di lokal/offline dengan menggunakan npm package @mdi/font, dengan cara

yarn add @mdi/font -D          

atau

npm install @mdi/font -D          

Jika anda memilih untuk menginstall font Material Design Icon dengan npm seperti di atas, maka anda harus meng-import css dari font material design icon tersebut di dalam main.js atau file js utama, seperti contoh di bawah ini

// main.js
import Vue from "vue";
import App from "./App";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

// import mdi icon css jika anda menginstall font secara lokal
// via npm install @mdi/font
import '@mdi/font/css/materialdesignicons.css';
// import di atas tidak diperlukan jika menggunakan cdn

Setelah font Material Design Icon ter-"embed", baik dengan cdn ataupun npm package, maka selanjutnya adalah mengubah setting Vuetify agar menggunakan icon font Material Design Icon (mdi).

Vue.use(Vuetify, {
  iconfont: "mdi"
});          

mdi seperti halnya fa untuk Font Awesome adalah prefix untuk font Material design.

Selanjutnya, anda sudah bisa menggunakan font Material Design Icon tersebut pada v-icon dengan menambahkan prefix mdi di setiap v-icon. Seperti contoh di bawah ini.

<v-layout row fill-height align-center justify-center>
  <v-icon>mdi-xbox</v-icon>
  <v-icon>mdi-account</v-icon>
  <v-icon>mdi-android</v-icon>
  <v-icon>mdi-debian</v-icon>
  <v-icon>mdi-square-inc-cash</v-icon>
</v-layout>

Di bawah ini adalah source code lengkap-nya.