> ## Content Index
> Fetch the complete content index at: https://debug.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Mengubah Icon Font di Vuetify dari Material Icon menjadi Material Design Icon (mdi)
- URL: https://debug.my.id/mengubah-icon-font-di-vuetify-menjadi-mdi/
- Published: 2018-12-01T02:39:00.000Z
- Updated: 2025-06-24T22:48:10.000Z
- Author: Tukang Debug
- Tags: JavaScript, Vue.js, Vue 3

Jika anda membuat web app dengan menggunakan [**Vuetify**](https://vuetifyjs.com/?ref=debug.my.id), 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](https://debug.my.id/mengubah-icon-font-di-vuetify-menjadi-mdi/). Nah, berikut ini adalah cara mudah untuk mengubah Icon Font dari Material Icon menjadi [**Material Design Icon**](https://debug.my.id/mengubah-icon-font-di-vuetify-menjadi-mdi/).

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 komponenJika 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![](https://debug.my.id/content/images/icon/favicon-4.ico)Sinau CodingTukang Debug![](https://debug.my.id/content/images/thumbnail/vuetify_2.png)](https://debug.my.id/membuat-promise-based-dialog/)

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**.

```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

```bash
yarn add @mdi/font -D          
```

atau

```bash
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

```javascript
// 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).

```javascript
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.

```html
<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.