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 menginstall npm package tertentu.

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.jsimport 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/fontimport '@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 iconfont 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 menggunkan font Material Design Icon 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>

Sekian dan selamat mencoba.

Sumber : Vuetify