Belajar Materialize #10 : Menggunakan Icon Materialize

Belajar Materialize #10 : Menggunakan Icon Materialize – Hai sahabat kodingin, berjumpa lagi dengan saya, kali ini masih membahas mengenai seri panduan tutorial belaja materialize.

Pada tahap ke 9 ini akan membahas “cara membuat icon dengan materialize”.

Materialize menyediakan fitur icon yang bernama google icon, sehingga kita tetap menggunakan produk layanan dari google. Material icon google mempunyai banyak variasi jenis icon yang layak kita gunakan. Saat ini total icon material sejumlah 932.

Penggunaan material icon bukan di class lagi, pada class tujuannya untuk mengubah tampilan, namun penggunaan icon google terdapat isi di dalam class.

Namun ada class wajib yang harus di gunakan yaitu dengan nama class .material-icons.

Berikut ini contoh macam-macam font yang tersedia.

Belajar Materialize #10 : Menggunakan Icon Materialize
Kumpulan Icon Materialize

Anda dapat melihatnya lebih lengkap di https://materializecss.com/icons.html.

Yuk kita bahas “cara menggunakan icon materialize”.

Cara Menggunakan Icon Materialize

Hal pertama yang perlu dilakukan untuk menggunakan icon google yaitu kita harus memanggil CDN cloud font nya google.

Contohnya.

Kode di atas terletak di dalam head tag HTML.

penggunaan font icon google yang paling umum menggunakan tag HTML i.

Berikut ini contoh potongan kode mengguanakn icon materialize.

Perhatikan kode di atas, nama tag elemen HTMLnya yaitu i, kemudian nama fontnya insert_cart. Dan Perlu di perhatikan yaitu harus menambahkan class material-icons.

Yuk kita coba membuat kode HTML secara utuh untuk menampilkan beberapa icon.

Kemudian silahkan buka di browser anda dan lihat hasilnya.

Belajar Materialize #10 : Menggunakan Icon Materialize
Cara Menggunakan Icon Materialize

Perhatikan gambar di atas, terdapat 3 jenis icon yang muncul sesuai dengan kode program yang kita tuliskan di atas.

Mengubah ukuran Icon Materialize

Ketika melihat tampilan icon di atas terlihat icon berukutan kecil, nah kita dapat mengubah ukuran icon tersebut.

Ada 4 jenis ukuran pada icon google yaitu tiny, small, medium dan large. Ke empat class tersebut memeiliki ukuran yang berbeda-beda.

Berikut ini contoh mengubah ukuran icon materialize.

Perhatikan kode diatas, terdapat 4 class icon yang berbeda-beda namun tetap menggunakan nama icon yang sama.

Selanjutnya… silahkan buka di halaman browser anda dan lihat hasilnya.

Belajar Materialize #10 : Menggunakan Icon Materialize
Mengubah ukuran Icon Materialize

Perhatikan gambar di atas, ukuran icon sudah memiliikii ukuran yang berbeda-beda, dari yang paling kecil sampai dengan yang besar.

Kesimpulan…

Icon yang ada di materialize memiliki varian sebanyak 932 untuk saat ini, untuk menggunakan icon dapat menggunakan class .mateial-icons dan di dalam class beruapa nama icon.

Oh iya perlu di ketahui, sebenernya icon material itu sama halnyan teks, kita dapat menambahkan custom css, misalnya mengubah warna.

Baca Juga…

Leave a Reply