Cara memasang dan menggunanan Material Design Symbols atau Material Design Icons di Nativescript 8

Pada pembahasan kali ini saya ingin membahas tentang bagaimana cara memasang dan menggunakan Material Design Symbols atau Material Design Icons di Nativescript 8.

Sebelum ke pembahasan, saya ingin sedikit intermeso sedikit tentang Material Design. Untuk versi lama Icon Material itu di namai dengan nama Material Design Icons (MDI), namun saat ini Material Design seperti merework icon-icon mereka dengan Patern Design mereka yang makin kesini makin terlihat lebih minimalis, dan saat ini lahirlah yang namanya Material Design Symbols (MDS). Jika kamu mengunjungi official sitenya, disana kamu akan menemukan 2 style, yaitu Material Icons dan Material Symbols dengan tanda New, seperti pada gambar di bawah ini :

https://fonts.google.com/icons

Pada style Material Symbols ini hanya mempunyai 3 tipe yaitu (Outlined, Rounded dan Sharped). Akan tetapi saat ini hanya tersedia untuk icon tipe Outlined, ketika kamu ubah filter di website nya menjadi Rounded tidak terjadi perubahan apa-apa. Mungkin kedepannya akan segera di perbaharui oleh pihak google. Karna memang ini masih terbilang baru.

UNDUH FILE MATERIAL SYMBOLS (.ttf)

Langkah awal kamu perlu mengunduh file (.ttf) Material Symbols nya lebih dulu, kamu dapat mengunduhnya disini : https://github.com/google/material-design-icons/tree/master/variablefont , untuk file .ttf nya simpan pada folder : /YOUR_NS_PROJECT/app/fonts.

Jika sudah di unduh, jangan lupa rename filenya menjadi seperti ini :

MENAMBAHKAN FONT-FAMILY KE CSS

Untuk mendapatkan font-family name-nya, kamu dapat menjalankan perintah berikut :

ns fonts

Lalu tambahkan seperti ini pada file css-nya

// Material Design Symbols
.mds-o {
  font-family: "Material Symbols Outlined", "MaterialSymbolsOutlined";
  font-weight: 400;
}

.mds-r {
  font-family: "Material Symbols Rounded", "MaterialSymbolsRounded";
  font-weight: 400;
}
.mds-s {
  font-family: "Material Symbols Sharp", "MaterialSymbolsSharp";
  font-weight: 400;
}

• .mds-o itu untuk Material Design Symbols Outlined
• .mds-r itu untuk Material Design Symbols Rounded
• .mds-s itun untuk Material Design Symbol Sharped

CARA MENGGUNAKAN

Kamu bisa mengunjungi web-nya (https://fonts.google.com/icons) untuk mencari icon yang kamu butuhkan.

Menggunakan Icon Name

Pilih icon yang kamu mau, lalu akan terbuka panel sebelah kanan, lalu kamu pilih tab Android, disana kamu akan mendapat Icon Name-nya, lihat gambar berikut :

Berikut contoh kode-nya :

<Label text="settings" class="mds-o"></Label>

Menggunakan Unicode

Awalnya kurang lebih sama, cuma pada step ini kamu harus pilih tab Web lalu scroll kebawah untuk menemukan Unicode-nya, kalau disini namanya bukan Unicode, tapi Code Point, namun keduanya kurang lebih sama, lihat gambar berikut :

Untuk cara menggunakannya kurang lebih sama seperti pada artikel Fontawesome Icon sebelumnya. kurang lebih seperti ini contoh kode-nya

<!-- Contoh menggunakan font pada Tag <Label> -->
<Label class="mds-o" text="&#xe8b8;"></Label>

<!-- Contoh menggunakan font pada Tag <Image> -->
<Image src="font://&#xe8b8;" class="mds-o" />

Kurang lebih sekian dulu untuk pembahasan kali ini, semoga bermanfaat, Terimakasih :)