Mengubah Icon Font di Vuetify dari Material Icon menjadi Material Design Icon (mdi) - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Mengubah Icon Font di Vuetify dari Material Icon menjadi Material Design Icon (mdi), kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel javascript, Artikel Tip/trik, Artikel Vue.js, Artikel Vuetify, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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

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

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

Sekianlah artikel Mengubah Icon Font di Vuetify dari Material Icon menjadi Material Design Icon (mdi) kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Mengubah Icon Font di Vuetify dari Material Icon menjadi Material Design Icon (mdi) dengan alamat link https://dev-create.blogspot.com/2018/12/mengubah-icon-font-di-vuetify-dari.html