Sinau Coding
Berbincang santai perihal pemrograman
Tukang ketik yang sedang belajar pemrograman
2:39 PM

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.


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

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

Di bawah ini adalah source code lengkap-nya.


Sekian dan selamat mencoba.

Sumber : Vuetify

Komentar

Load more

Terbaru

Cara install Postgresql di MacOS
Postgresql adalah salah satu object-relational database open source yang memiliki banyak fitur enterprise layaknya Or...
Cara install npm di Laravel
aravel adalah sebuah framework untuk webapp yang berbasis php, sedangkan npm adalah sebuah package manager untuk node...
Cara install MariaDB di MacOS dengan menggunakan Homebrew
MariaDB selain tersedia di Windows dan Linux, juga tersedia di MacOS dan dapat diinstall dengan menggunakan homebrew....
Cara insert data ke dalam list atau table tanpa menutup Modal
Desain halaman dan dialog tambah data biasanya adalah, User klik tombol yang akan memunculkan dialog, dimana dialog a...