Pembaruan 2019 di sini:
Untuk menghosting sendiri ikon material Anda, yang Reguler, Bulat, Tajam, semua varian. Dapatkan mereka dari repo ini:
https://github.com/petergng/material-icon-font
Untuk beberapa alasan saya tidak tahu mengapa font ini tidak dapat diakses dengan mudah dari repositori Google.
Tapi ini dia.
Setelah mengunduh paket, buka folder bin dan Anda akan melihat empat varian. Tentu saja, terserah Anda untuk menggunakan yang mana saja.
Untuk menggunakannya, buat file css dan
- Hasilkan bentuk font untuk setiap varian yang Anda butuhkan:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
src: local('Material-Icons-Regular'),
url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
src: local('Material-Icons-Round'),
url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
url(./icons/round/Material-Icons-Round.woff) format('woff'),
url(./icons/round/Material-Icons-Round.svg) format('svg'),
url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
src: local('Material-Icons-Sharp'),
url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}
The urlakan link ke mana ikon yang terletak di proyek Anda.
- Sekarang mari kita daftarkan kelas ikon:
.material-icons-outlined, .material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Ini akan membuat kedua
kelas .material-icons-outlined,
dan
.material-iconskelas menggunakan default yang sama. Jika Anda ingin menggunakan .material-icons-sharp, tambahkan saja ke dua nama kelas.
- Terakhir, izinkan kami memasukkan tampilan font yang Anda tarik dari langkah 1.
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
Sekali lagi, untuk menggunakan lebih banyak varian, seperti Sharp, tambahkan saja bloknya seperti dua di atas.
Setelah selesai ... buka html Anda dan gunakan ikon yang baru dibuat.
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
