แบบอักษรไอคอนล่าสุดและ CSS สำหรับไอคอนการออกแบบวัสดุที่โฮสต์เอง
แพ็คเกจนี้ได้รับการอัปเดตอัตโนมัติ ดังนั้นจะมีไอคอนล่าสุดจาก Google อยู่เสมอ
สำหรับสัญลักษณ์วัสดุ ดูที่
material-symbols
สำหรับ SVG โปรดดูที่
@material-design-icons/svg
ติดตั้งเวอร์ชันล่าสุดโดยใช้:
npm install material-icons@latest
หมายเหตุ: หากคุณกำลังอัพเกรดจาก 0.x เป็น 1.x โปรดดูบันทึกประจำรุ่น 1.0.0
นำเข้าใน JS (ตัวอย่าง: src/index.js
ใน Create React App, src/main.js
ใน Vue CLI):
import 'material-icons/iconfont/material-icons.css' ;
หรือนำเข้าใน CSS (ตัวอย่าง: src/styles.css
ใน Angular CLI):
@import 'material-icons/iconfont/material-icons.css' ;
หรือนำเข้าในรูปแบบ HTML:
< link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >
หากต้องการแสดงไอคอน ให้ใช้วิธีใดวิธีหนึ่งต่อไปนี้:
< 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 -->
material-icons.css
เริ่มต้นจะมี CSS สำหรับแบบอักษรทั้งหมด นี่อาจทำให้เครื่องมือบิลด์ เช่น webpack คัดลอกฟอนต์ทั้งหมดไปยังไดเร็กทอรี build แม้ว่าคุณจะไม่ได้ใช้ฟอนต์ทั้งหมดก็ตาม หากต้องการลดขนาดบิลด์ ให้นำเข้าเฉพาะสไตล์ที่คุณต้องการ ตัวอย่างเช่น หากคุณต้องการเพียงไอคอนที่เติมและมีเส้นขอบ ให้นำเข้า filled.css
และ outlined.css
แทนค่าเริ่มต้น material-icons.css
:
- import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';
ไอคอน | ซีเอสเอส | สัส |
---|---|---|
อิ่มแล้ว | เติม.css | เติม.scss |
ร่างไว้ | เค้าร่าง.css | ร่าง.scss |
กลม | รอบ.css | รอบ.scss |
คม | ชาร์ป.css | ชาร์ป.scss |
ทูโทน | ทูโทน.css | ทูโทน.scss |
นำเข้าใน Sass (ตัวอย่าง: src/styles.scss
ใน Angular CLI):
@import ' material-icons/iconfont/material-icons.scss ' ;
ตัวแปร Sass ที่มีจำหน่าย:
$material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;
หากคุณได้รับข้อผิดพลาดกับ webpack หรือ Vue CLI ให้เพิ่มบรรทัดนี้ก่อนที่จะนำเข้า:
$material-icons-font-path : ' ~material-icons/iconfont/ ' ;
mat-icon
หากต้องการแสดงไอคอน ให้ใช้วิธีใดวิธีหนึ่งต่อไปนี้:
< 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 >
หรือคุณสามารถใช้คลาส CSS แทนตัวอักษรควบเพื่อแสดงไอคอนได้ เรียนรู้เพิ่มเติม
ดูการสาธิต
ไอคอนการออกแบบวัสดุถูกสร้างขึ้นโดย Google
เราได้จัดทำไอคอนเหล่านี้เพื่อให้คุณรวมเข้ากับผลิตภัณฑ์ของคุณภายใต้ Apache License เวอร์ชัน 2.0 คุณสามารถรีมิกซ์และแบ่งปันไอคอนและเอกสารเหล่านี้ในผลิตภัณฑ์ของคุณได้อีกครั้ง เราชอบการระบุแหล่งที่มาในแอปของคุณ เกี่ยวกับ หน้าจอ แต่ก็ไม่จำเป็น