หน้านี้ได้รับการแปลโดย Cloud Translation API

คู่มือสัญลักษณ์วัสดุ

สัญลักษณ์วัสดุคืออะไร

สัญลักษณ์ Material คือไอคอนใหม่ล่าสุดของเรา ซึ่งรวมอักขระมากกว่า 2,500 ตัวไว้ในไฟล์แบบอักษรเดียวที่มีรูปแบบการออกแบบที่หลากหลาย สัญลักษณ์มีอยู่ใน 3 รูปแบบและแกนแบบอักษรที่ปรับได้ 4 แกน (เติมสี น้ำหนัก คะแนน และ ขนาดออปติคัล) ดูสัญลักษณ์วัสดุทั้งชุดในสัญลักษณ์ Material คลัง

แกน `FILL`

ฟีเจอร์เติมสีช่วยให้คุณแก้ไขสไตล์ไอคอนเริ่มต้นได้ ไอคอนเดียวสามารถแสดงผลได้ทั้งสถานะที่มีและไม่มีเส้นขอบ

หากต้องการถ่ายทอดการเปลี่ยนสถานะ ให้ใช้แกนเติมสำหรับภาพเคลื่อนไหวหรือการโต้ตอบ ค่าเริ่มต้นจะเป็น 0 หรือ 1 หากเติมค่าเสร็จสมบูรณ์ นอกจากแกนน้ำหนักแล้ว พื้นผิวยังมีผลต่อลักษณะของไอคอนด้วย

`wght` แกน

น้ำหนักจะกำหนดน้ำหนักของเส้นสัญลักษณ์ โดยมีช่วงน้ำหนักระหว่างบาง (100) กับหนา (700) นอกจากนี้ น้ำหนักยังมีผลต่อขนาดโดยรวมของ +

`GRAD` แกน

การจําลองแกนคะแนน

น้ำหนักและคะแนนจะส่งผลต่อความหนาของสัญลักษณ์ การปรับคะแนนจะละเอียดกว่าการปรับน้ำหนักและส่งผลต่อขนาดของสัญลักษณ์เพียงเล็กน้อย

คะแนนจะแสดงในแบบอักษรข้อความบางประเภทด้วย คุณจับคู่ระดับชั้นระหว่างข้อความและสัญลักษณ์เพื่อให้เอฟเฟกต์ภาพดูกลมกลืนกันได้ ตัวอย่างเช่น หากแบบอักษรข้อความ มีค่าเกรด -25 สัญลักษณ์จับคู่กับค่าที่เหมาะสมได้ เช่น -25

คุณจะใช้คะแนนสำหรับความต้องการที่แตกต่างกันได้ดังนี้

การเน้นต่ำ (เช่น ระดับ -25): ใช้ระดับต่ำเพื่อลดแสงสะท้อนของสัญลักษณ์สีอ่อนบนพื้นหลังสีเข้ม

การเน้นย้ำสูง (เช่น คะแนน 200): หากต้องการไฮไลต์สัญลักษณ์ ให้เพิ่มข้อความเชิงบวก เกรด

แกน `opsz`

ขนาดออปติคัลมีตั้งแต่ 20dp ถึง 48dp

เพื่อให้รูปภาพดูเหมือนกันในขนาดต่างๆ ความหนาของเส้นจะเปลี่ยนไปตามการปรับขนาดไอคอน ขนาดออปติคัลช่วยให้สามารถ ปรับน้ำหนักเส้นโครงร่างเมื่อคุณเพิ่มหรือลดขนาดของสัญลักษณ์

การรับสัญลักษณ์ของวัสดุ

สัญลักษณ์ Material มีให้บริการในหลายรูปแบบและเหมาะสำหรับโปรเจ็กต์และแพลตฟอร์มประเภทต่างๆ ทั้งสำหรับนักพัฒนาแอปในแอปและนักออกแบบในโมคอัปหรือโปรโตไทป์

การอนุญาตให้ใช้สิทธิ

สัญลักษณ์ของวัสดุมีให้บริการภายใต้สัญญาอนุญาต Apache เวอร์ชัน 2.0

การเรียกดูและดาวน์โหลดไอคอนแต่ละรายการ

สัญลักษณ์วัสดุทั้งชุดมีอยู่ในสัญลักษณ์วัสดุ คลัง ในรูปแบบ SVG หรือ PNG เหมาะสำหรับเว็บ, Android และ iOS หรือ ของนักออกแบบ

ที่เก็บ Git

ที่เก็บ Git มีชุดสัญลักษณ์ Material ทั้งหมดในรูปแบบ SVG

$ git clone https://github.com/google/material-design-icons

การใช้สัญลักษณ์ของวัสดุ

ใช้ในเว็บ

แบบอักษรของสัญลักษณ์ Material เป็นวิธีที่ง่ายที่สุดในการนำสัญลักษณ์ Material มาใช้ ลงในโปรเจ็กต์เว็บ

ไอคอนถูกรวมเป็นชุดในแบบอักษรเดียวเพื่อให้นักพัฒนาเว็บสามารถ รวมไอคอนเหล่านี้ด้วยโค้ดเพียงไม่กี่บรรทัด

แบบอักษรแบบคงที่ที่มี Google Fonts

วิธีที่ง่ายที่สุดในการตั้งค่าแบบอักษรไอคอนเพื่อใช้ในหน้าเว็บคือผ่าน Google Font ใส่บรรทัด HTML เดียวนี้

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

ข้อมูลโค้ดด้านบนมีการกำหนดค่าเริ่มต้นสำหรับแกนแต่ละแกน โดยมีน้ำหนัก 400, ขนาดแบบออปติคอล 48, ระดับ 0 และการเติม (0 เช่นกัน)

ใช้ Fonts CSS API เพื่อกำหนดค่าแกนต่างๆ ลองดูตัวอย่างต่อไปนี้

แบบอักษรที่ปรับแต่งได้โดยใช้ Google Fonts

หากคุณทำให้ไอคอนเคลื่อนไหวผ่าน CSS หรือต้องการควบคุมฟีเจอร์ของไอคอนได้ละเอียดยิ่งขึ้น ให้ใช้ แบบอักษรของตัวแปรสัญลักษณ์ Google เมื่อใช้ช่วงในรูปแบบ number..number เราโหลดแบบอักษรแบบผันแปรทั้งชุดได้ โปรดดูการสนับสนุนแบบอักษรแบบผันแปรของ Can I Use เพื่อดูว่าผู้ใช้จะโหลดแบบอักษรแบบผันแปรได้หรือไม่ ซึ่งส่วนใหญ่แล้วผู้ใช้จะโหลดได้ ตัวอย่างเช่น

หรือแม้แต่ทำให้เคลื่อนไหว

เพิ่มประสิทธิภาพแบบอักษรไอคอน

เลือกชุดย่อยของแบบอักษรให้รวมเฉพาะไอคอนที่เกี่ยวข้องกับแอปพลิเคชันของคุณโดยใช้พารามิเตอร์การค้นหา &icon_names โดยใช้รายการชื่อไอคอน (แบบตัวยึด) ที่คั่นด้วยคอมมาซึ่งจัดเรียงตามลําดับตัวอักษร

ไม่แนะนำ — ใช้ค่าเริ่มต้น การตั้งค่าจะโหลดไอคอนกว่า 3,800 แบบ เปย์โหลดแบบอักษร: 295 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
แนะนำ - ระบุชื่อไอคอนเพื่อโหลดเฉพาะไอคอนที่จำเป็น น้ำหนักของแบบอักษร: 1.7 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
กำหนดให้แกนแบบอักษรของตัวแปรรวมเฉพาะแกนของแอปพลิเคชันของคุณ จะใช้ แอปพลิเคชันส่วนใหญ่ใช้แกนเพียงไม่กี่รูปแบบเท่านั้น

ไม่แนะนำ — ไม่มีการกำหนดค่าแกนจะโหลด แบบอักษรเริ่มต้นแบบคงที่ (น้ำหนัก 400, ขนาดออปติคัล 24, รอบที่ 50, ระดับ 0, เติม 0) โดยปกติแล้ว ไม่จำเป็นต้องรวมแกนแบบอักษรแบบแปรผันทั้งหมดและจะเพิ่มเพย์โหลด น้ำหนักของแบบอักษร: 7.9 MB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
แนะนํา - ใช้การผสมผสานแกนเฉพาะ ตัวอย่างเช่น ฟิลด์ "FILL" แบบเต็ม XA ทำให้ CSS เปลี่ยนระหว่างรัฐและ "ROND" เลือก 100 แล้ว การออกแบบอีกด้วย เพย์โหลดแบบอักษร: 2.6 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

การโฮสต์แบบอักษรด้วยตนเอง

โฮสต์ไอคอน แบบอักษร ในตำแหน่งที่คุณควบคุม เพื่อตัดสินใจว่าจะอัปเดตชิ้นงานเมื่อใด สำหรับ เช่น ถ้า URL คือ https://example.com/material-symbols.woff ให้เพิ่มพารามิเตอร์ กฎ CSS ต่อไปนี้:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

หากต้องการแสดงผลแบบอักษรอย่างถูกต้อง ให้ประกาศกฎ CSS สําหรับการแสดงผลไอคอน โดยปกติแล้ว กฎเหล่านี้จะแสดงเป็นส่วนหนึ่งของสไตล์ชีต Google Fonts API แต่จะต้องรวมไว้ในโปรเจ็กต์ด้วยตนเองเมื่อโฮสต์เอง

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  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;
}

การใช้ไอคอนใน HTML

ตัวอย่างข้างต้นใช้ฟีเจอร์การพิมพ์ที่เรียกว่า อักษรรวม ซึ่งทำให้แสดงผลรูปสัญลักษณ์รูปโดยใช้ชื่อตัวอักษรได้ เว็บเบราว์เซอร์จะแทนที่ตัวยึดอักขระของข้อความด้วยเวกเตอร์ไอคอนโดยอัตโนมัติ และแสดงโค้ดที่อ่านง่ายกว่าการอ้างอิงอักขระตัวเลขที่เทียบเท่า ตัวอย่างเช่น ใน HTML คุณจะมี arrow_forward เพื่อแสดงไอคอนแทน  สำหรับไอคอนอื่นๆ ให้ใช้รูปแบบ Snake Case ของชื่อไอคอน (เช่น ใช้ขีดล่างแทนการเว้นวรรค)

ฟีเจอร์นี้ใช้ได้ในเบราว์เซอร์สมัยใหม่ส่วนใหญ่ทั้งในอุปกรณ์เดสก์ท็อปและอุปกรณ์เคลื่อนที่ ดูการสนับสนุนของ Can I Use's ligatures เพื่อดูว่าผู้ใช้จะประมวลผลตัวยึดอักษรได้หรือไม่ ซึ่งส่วนใหญ่แล้วทำได้

หากจำเป็นต้องรองรับเบราว์เซอร์ที่ไม่รองรับการรวมอักขระ ให้ระบุไอคอนโดยใช้การอ้างอิงอักขระตัวเลข (หรือที่เรียกว่าโค้ดพอยต์) ดังตัวอย่างด้านล่าง

ค้นหาทั้งชื่อไอคอนและโค้ดพอยต์ใน คลังสัญลักษณ์ Material โดยเลือกไอคอนใดก็ได้แล้วเปิดแผงแบบอักษรไอคอน แบบอักษรไอคอนแต่ละแบบมีดัชนีโค้ดจุดในที่เก็บ Git ของ Google Fonts ซึ่งแสดงชุดชื่อและรหัสอักขระทั้งหมด

การจัดรูปแบบไอคอนในดีไซน์ Material

ไอคอนเหล่านี้ได้รับการออกแบบตามดีไซน์ Material หลักเกณฑ์ และจะดูดีที่สุดเมื่อใช้ขนาดและสีของไอคอนที่แนะนำ สไตล์ ด้านล่างจะช่วยให้การใช้ขนาด สี และสถานะของกิจกรรมที่แนะนำของเราเป็นไปอย่างง่ายดาย

ใช้ใน Android

ในไลบรารีสัญลักษณ์ของ Material ไอคอนทั้งหมดอยู่ในรูปแบบเวกเตอร์ที่วาดได้ ถึง เรียนรู้เพิ่มเติม ดูที่ Android Vector Asset Studio เอกสารประกอบ

ใช้ใน iOS

ไอคอนเหล่านี้ยังมีให้บริการในรูปแบบสัญลักษณ์ของ Apple ด้วย หากต้องการเรียนรู้เพิ่มเติม พบกับสัญลักษณ์อย่างเป็นทางการของ Apple ภาพรวม และ การใช้งาน คำแนะนำ

ใช้ใน Flutter

เราวางแผนที่จะรองรับสัญลักษณ์ Material ใน Flutter โปรดติดตามข้อมูลอัปเดต