Cara Menambahkan dan Kustomisasi Material Icon ke HTML
Tutorial By
Material Icon adalah salah satu dari sekian banyak penyedia icon gratis. Icon tersebut bisa kamu manfaatkan untuk mempercantik tampilan blog atau situs milik kamu. Ini lebih bagus dan lebih cepat dari pada kamu mendesain icon sendiri.
Kita mempunyai file html/template seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Cara menambahkan dan kustomisasi material icon ke dalam html</title>
</head>
<body>
<h1>Cara menambahkan dan kustomisasi material icon ke dalam html</h1>
<div class='panel-atas'>
<a href='#' class='akun'><span>Akun</span></a>
<a href='#' class='artikel'><span>Artikel</span></a>
<a href='#' class='tulis'><span>Tulis Baru</span></a>
<a href='#' class='logout'><span>Keluar</span></a>
</div>
</body>
</html>
Pada html di atas, pada url Akun, Artikel, Tulis baru, dan Keluar akan kita tambahkan dengan icon yang sesuai. Posisi icon akan kita letakkan tepat sebelum masing-masing text.
Bagaimana caranya? Berikut langkah-langkahnya:
Cara menambahkan material icon
1. Kunjungi web https://materialdesignicons.com/, cari dan pilih icon yang sesuai.
2. Setelah mengklik icon yang akan di gunakan – klik View SVG – blok dan Copy kode tersebut untuk diletakkan ke dalam file html.
3. Kemudian Paste kode tersebut ke dalam file html/template dimana icon akan di tambahkan. Sehingga bagian script url menjadi seperti berikut:
<a href='#' class='akun'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z" />
</svg><span>Akun</span></a>
<a href='#' class='artikel'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M20,18H4V8H20M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M15,16H6V14H15V16M18,12H6V10H18V12Z" />
</svg><span>Artikel</span></a>
<a href='#' class='tulis'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2" />
</svg><span>Tulis Baru</span></a>
<a href='#' class='logout'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z" />
</svg><span>Keluar</span></a>
Cara kustomisasi material icon
Agar icon SVG bisa dan lebih bebas di kustomisasi, kita harus menghapus style=”width:24px;height:24px” dan fill=”#000000″ pada kode ikon. Lalu kemudian tambahkan class=”ikon” ke dalam tag SVG sehingga bagian script url menjadi seperti ini:
<a href='#' class='akun'><svg class="ikon" viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z" />
</svg><span>Akun</span></a>
<a href='#' class='artikel'><svg class="ikon" viewBox="0 0 24 24">
<path d="M20,18H4V8H20M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M15,16H6V14H15V16M18,12H6V10H18V12Z" />
</svg><span>Artikel</span></a>
<a href='#' class='tulis'><svg class="ikon" viewBox="0 0 24 24">
<path d="M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2" />
</svg><span>Tulis Baru</span></a>
<a href='#' class='logout'><svg class="ikon" viewBox="0 0 24 24">
<path d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z" />
</svg><span>Keluar</span></a>
Tambahkan style berikut di dalam <head>, tepatnya di atas tag penutup </head>:
<style>
body {
font-size: 16px;
line-height: 1.5;
}
.panel-atas .ikon {
fill: blue;
width: 24px;
height: 24px;
}
</style>
Sehingga hasil tampilannya pada browser akan terlihat seperti ini:
Sepertinya kelihatan kurang rapi. Untuk merapikan agar terlihat lebih bagus, kita akan melengkapi lagi dengan beberapa CSS:
<style>
body {
font-size: 16px;
line-height: 1.5;
text-align: center;
}
.panel-atas a {
display: inline-block;
padding: 0 16px;
line-height: 1.25;
}
.panel-atas a + a {
border-left: 1px solid #ddd;
}
.panel-atas .ikon {
fill: blue;
width: 24px;
height: 24px;
}
.panel-atas .ikon + span {
display:block;
}
</style>
Sehingga file html/template selengkapnya setelah di tambahkan ikon dan di kustomisasi akan seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Cara menambahkan dan kustomisasi material icon ke dalam html</title>
<style>
body {
font-size: 16px;
line-height: 1.5;
text-align: center;
}
.panel-atas a {
display: inline-block;
padding: 0 16px;
line-height: 1.25;
}
.panel-atas a + a {
border-left: 1px solid #ddd;
}
.panel-atas .ikon {
fill: blue;
width: 24px;
height: 24px;
}
.panel-atas .ikon + span {
display:block;
}
</style>
</head>
<body>
<h1>Cara menambahkan dan kustomisasi material icon ke dalam html</h1>
<div class='panel-atas'>
<a href='#' class='akun'><svg class="ikon" viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z" />
</svg><span>Akun</span></a>
<a href='#' class='artikel'><svg class="ikon" viewBox="0 0 24 24">
<path d="M20,18H4V8H20M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M15,16H6V14H15V16M18,12H6V10H18V12Z" />
</svg><span>Artikel</span></a>
<a href='#' class='tulis'><svg class="ikon" viewBox="0 0 24 24">
<path d="M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2" />
</svg><span>Tulis Baru</span></a>
<a href='#' class='logout'><svg class="ikon" viewBox="0 0 24 24">
<path d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z" />
</svg><span>Keluar</span></a>
</div>
</body>
</html>
Dan begini tampilan hasilnya di browser:
Di web Material Design Icon kamu juga bisa mendapatkan icon sosial medial. Seperti Facebook, Twitter, WhatsApp, dan masih banyak lagi yang lainnya. Selamat mencoba.
