Material Icons oleh Google Material Design

Material Icons oleh Google Material Design adalah salah satu Font Face yang semakin populer, tidak hanya untuk website, blog atau situs Icon ini sendiri bisa digunakan di Aplikasi ponsel bahkan bisa dengan mudah digunakan ketika membuat project dengan library Flutter yang hanya perlu meng-import dependency pada file pubspec.yaml. Nah tidak heran Icon garapan tim Google Material Design ini semakin banyak digunakan bukan hanya dari icon-nya yang bersahabat tetapi dari prinsip desain yang mereka usung.

Lalu pada artikel ini, saya akan sedikit ngebahas bagaimana cara menggunakan icon ini, bagaimana melakukan setup pada css dan penyesuaian lainnya.

Oke pertama, salin snippet berikut pada tag <head> blog yang ingin digunakan dan pastikan kamu menaruh sebelum css blog kalian. Kalo kalian bertanya "Kenapa ditaruh sebelum css blog, padahal dimana saja bisa". Yap bisa, tapi ingat prinsip css pada browser apabila ada selector yang sama dimana properti-nya juga sudah terdapat di kedua selector maka properti yang terbawah yang digunakan.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" media="all" />

Nah selanjutnya, kalian bisa langsung menggunakan icon ini dengan <i class="material-icons">menu</i> untuk menampilkan icon menu. Contoh icon ini menggunakan fitur yang disebut ligatures. Nah untuk browser yang support fitur ligatures ini adalah:
- Google Chrome: 11+
- Mozilla Firefox: 3.5+
- Apple Safari: 5+
- Microsoft IE: 10+
- Microsoft Edge: 18+
- Opera: 15+
- Apple MobileSafari: iOS 4.2+
- Android Browser: 3.0+

Sedangkan untuk browser yang tidak mendukung ligatures dapat menggunakan numerik karakter seperti ini <i class="material-icons">&#xe5d2;</i>.

Nah untuk icon kalian bisa langsung check dokumentasi dari Material Icons ini disini. Yang sudah lengkap dengan code point dari numerik karakter.

Oke contoh lengkapnya:

<!DOCTYPE html>

<html>

<head>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" media="all" />

</head>

<body>

<a href="#menu"><i class="material-icons">menu</i> Menu</a>

</body>

</html>

Oke cukup sekian ya mblo, kalian bebas mencoba dan mengatur icon ini sendiri dan icon ini tidak hanya dapat digunakan pada blog WapBlog.ID melainkan pada platform lain.

Pranala luar:
fonts.google.com
alistapart.com