material icons

ikon material

Font ikon terbaru dan CSS untuk ikon desain material hosting mandiri.

Paket ini diperbarui secara otomatis, sehingga akan selalu memiliki ikon terbaru dari Google.

Untuk Simbol Material, lihat material-symbols

Untuk SVG, lihat @material-design-icons/svg

• Instalasi
• Penggunaan
• Ikon yang Tersedia

Instalasi

Instal versi terbaru menggunakan:

npm install material-icons@latest

Catatan: Jika Anda meningkatkan versi dari 0.x ke 1.x lihat catatan rilis 1.0.0.

Penggunaan

Impor di JS (contoh: src/index.js di Create React App, src/main.js di Vue CLI):

 import 'material-icons/iconfont/material-icons.css' ;

atau impor dalam CSS (contoh: src/styles.css di Angular CLI):

 @import 'material-icons/iconfont/material-icons.css' ;

atau impor dalam HTML:

 < link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >

Untuk menampilkan ikon, gunakan salah satu dari berikut ini:

 < span class =" material-icons " > pie_chart </ span >          <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span >    <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span >    <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->

Mengurangi Ukuran Pembuatan

material-icons.css default menyertakan CSS untuk semua font. Hal ini dapat menyebabkan alat build seperti webpack menyalin semua font ke direktori build meskipun Anda tidak menggunakan semuanya. Untuk mengurangi ukuran build, impor hanya gaya yang Anda perlukan. Misalnya, jika Anda hanya memerlukan ikon yang diisi dan diberi garis, imporlah filled.css dan outlined.css alih-alih material-icons.css default :

 - import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';

Tunjukkan semuanya

Ikon	CSS	Kelancangan
Dipenuhi	terisi.css	terisi.scss
Diuraikan	diuraikan.css	diuraikan.scss
Bulat	bulat.css	bulat.scss
Tajam	tajam.css	tajam.scss
Dua Nada	dua nada.css	dua nada.scss

Menggunakan Sass

Impor di Sass (contoh: src/styles.scss di Angular CLI):

 @import ' material-icons/iconfont/material-icons.scss ' ;

Variabel Sass yang tersedia:

 $material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;

Jika Anda mendapatkan kesalahan dengan webpack atau Vue CLI, tambahkan baris ini sebelum mengimpor:

 $material-icons-font-path : ' ~material-icons/iconfont/ ' ;

Menggunakan mat-icon Angular

Untuk menampilkan ikon, gunakan salah satu dari berikut ini:

 < mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >

Menggunakan Kelas CSS

Alternatifnya, Anda dapat menggunakan kelas CSS sebagai ganti pengikat untuk menampilkan ikon. Pelajari lebih lanjut

Ikon yang Tersedia

Lihat demo.

Lisensi

Ikon desain material dibuat oleh Google.

Kami telah menyediakan ikon-ikon ini untuk Anda masukkan ke dalam produk Anda di bawah Lisensi Apache Versi 2.0. Jangan ragu untuk me-remix dan membagikan ulang ikon dan dokumentasi ini di produk Anda. Kami ingin atribusi di layar tentang aplikasi Anda, namun itu tidak wajib.