Paket ikon resmi - Google
Saat ini Google memiliki 2 Icon Set atau paket ikon yaitu :
1. Material Icons
2. Material Symbols
Material Icons
Letakkan tag link berikut ini di area <head> untuk mencegah perantaian penting font Google Material Icons terhadap kecepatan pemuatan halaman blog:
<link as='font' crossorigin='' href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='preload'/>
Paket ikon lama ini terdapat 5 gaya yaitu:
- Outlined (garis luar)
- Filled (berisi / padat)
- Rounded (sudut tumpul)
- Sharp (sudut tajam)
- Two tone (dua warna)
Akses ikon di: Material Icons
Petunjuk penggunaan standar icon di: Panduan Material Icons
Untuk penggunaan ikon opstimisasi pagespeed insight, copy paste Kode CSS Ikon Material Icons dibawah ini, letakkan bersama CSS lainnya didalam template
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}Material Symbols
Letakkan tag link berikut ini di area <head> untuk mencegah perantaian penting font Google Material Symbols terhadap kecepatan pemuatan halaman blog:
<link as='font' crossorigin='' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined' rel='preload'/>
Paket ikon ini diperkenalkan pada April 2022 yang lebih cenderung mengutamakan style outline dari pada versi Material Icons
- Outlined (garis luar)
- Rounded (sudut tumpul)
- Sharp (sudut tajam)
Akses ikon di Material Symbols
Petunjuk penggunaan icon di: Panduan Simbol Material
Untuk penggunaan ikon opstimisasi pagespeed insight, copy paste Kode CSS Ikon Material Symbols dibawah ini, letakkan bersama CSS lainnya didalam template
/* fallback */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v76/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}