Material Design Icons - Iconify

Postingan terkait :

Ikon SVG percepat loading blog

Daftar isi:

Pilihan ikon alternatif dan ringan

Intro

Sebagai ikon alternatif, MDI Iconify sebagai pilihan ikon dalam daftar koleksi ini berformat SVG atau lebih tepatnya akan dirender sebagai ikon SVG sehingga dampak terhadap kecepatan muat halaman sangat kecil.

Hasil inspeksi elemen Iconify

Menurut beberapa sumber, format SVG merupakan elemen XML murni sehingga pada saat dirender, browser akan mengira bahwa ini adalah bagian dari template halaman itu sendiri. Hal ini berbeda dengan format ikon lainnya. Ikon lain umumnya akan dirender sebagai jenis web font yang efeknya terhadap render halaman sama seperti saat menyematkan Google Font yang seringkali menimbulkan kendala pemuatan font gagal karena tak terlihat.

Audit pemuatan font gagal

Perbedaan lainnya, untuk menggunakan MDI Iconify adalah cara penyematannya tidak menggunakan tag <svg> sebagaimana mestinya,

<svg><path='...'/></svg>

namun menggunakan metode Font Icon layaknya Font Awesome atau Google Material Icons sehingga penulisan tagnya menjadi lebih efisien atau lebih simpel dibandingkan menuliskan dalam tag SVG aslinya.

Cara pasang ikon SVG MDI (Material Design Icons):
Copy dan paste script dibawah ini diantara tag <head> atau <body>

<script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>

<script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>

Koleksi Iconify MDI format SVG

Cara penulisan tag :

Copy tag dibawah ini, lalu ganti teks berbackground kuning dengan nama ikon yang tersedia.

<span class="iconify" data-icon="nama:icon"></span>

Misal : Bagikan.
Penulisannya : <span class="iconify" data-icon="mdi:share-variant"></span> Bagikan.

Untuk ikon warna juga sama, berformat SVG.

Untuk memberi warna pada ikon reguler / berwarna hitam, bisa menggunakan style langsung kedalam tag ikonnya atau CSS yang penulisannya sbb:

Misal : Facebook.
Penulisan : <span style='color:blue' class="iconify" data-icon="mdi:facebook"></span>

atau jika dengan CSS karena dirender sebagai SVG maka menggunakan fill sbb:

.iconify {fill:blue}

Dan untuk mengatur ukuran ikon, gunakan width dan height yang seimbang misal width:30px;height:30px.

**Koleksi Ikon MDI - Iconify**
mdi:share-variant mdi:facebook bxl:blogger entypo-social:facebook entypo:foursquare mdi:facebook-messenger mdi:linkedin mdi:twitter mdi:instagram mdi:pinterest mdi:whatsapp mdi:youtube mdi:gmail mdi:rss-box mdi:language-javascript mdi:code-braces-box mdi:code-not-equal-variant mdi:attachment mdi:paperclip mdi:copyright mdi:at mdi:dots-vertical mdi:launch mdi:link dashicons:menu-alt mdi:home fa-solid:home mdi:map-marker-radius mdi:phone-classic mdi:format-paint mdi:image mdi:file-gif-box mdi:file-jpg-box mdi:file-png-box mdi:file-pdf-box mdi:file-xml-box mdi:archive mdi:printer mdi:account-circle mdi:chevron-right mdi:chevron-up mdi:chevron-down mdi:manu-down gg:search mdi:share-circle mdi:share

**Koleksi Ikon MDI - Iconify colorfull**
logos:amp logos:amp-icon logos:blogger logos:bootstrap logos:chrome logos:firefox logos:font-awesome logos:google-icon logos:google-developer logos:google logos:google-mail logos:javascript logos:linkedin logos:open-graph logos:mozilla logos:tiktok-icon logos:twitter logos:tumblr-icon logos:codepen-icon logos:facebook logos:instagram logos:flickr logos:lighthouse logos:linkedin-icon logos:pinterest logos:skype logos:shopify logos:dropbox logos:soundcloud logos:spotify-icon logos:spotify logos:stackoverflow-icon logos:telegram logos:tiktok logos:tumblr logos:vimeo-icon logos:vimeo logos:web-dev-icon logos:web-dev logos:whatsapp logos:w3c logos:wordpress-icon logos:weebly logos:wix logos:youtube-icon logos:youtube logos:linux-tux

Selengkapnya tentang Iconify : MDI Iconify

Postingan terkait : Topik Font

Material Design Icons - Iconify

Pilihan ikon alternatif dan ringan

Koleksi Iconify MDI format SVG

Formulir Kontak