ไอคอนพื้นฐาน
หากต้องการใช้ไอคอน Google เพิ่มบรรทัดต่อไปนี้ภายใน <head> ส่วนของหน้าเว็บ HTML ของคุณ:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
หมายเหตุ: ไม่มีการดาวน์โหลดหรือติดตั้งจะต้อง!
เพิ่ม material-icons ระดับองค์ประกอบแบบอินไลน์และใส่ชื่อของไอคอน:
ตัวอย่าง
รหัสต่อไปนี้:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
ผลการค้นหาใน:
cloud
cloud
cloud ลองตัวเอง» ไอคอนของ Google ได้รับการออกแบบมาเพื่อใช้กับองค์ประกอบแบบอินไลน์ <i> และ <span> องค์ประกอบที่ใช้กันอย่างแพร่หลายสำหรับไอคอน
หมายเหตุ: ไอคอนวัสดุจะ 24px โดยค่าเริ่มต้น
นอกจากนี้ยังทราบว่าถ้าคุณเปลี่ยนสีของภาชนะไอคอนของสีของไอคอนที่มีการเปลี่ยนแปลงมากเกินไป สิ่งเดียวกันจะไปสำหรับเงาและสิ่งอื่น ๆ ที่ได้รับการสืบทอดมาใช้ CSS ยกเว้นในกรณีที่เป็น CSS คุณสมบัติ font-size ซึ่งมักจะเป็น 24px เว้นแต่สิ่งอื่นที่ระบุไว้
ไอคอนขนาดใหญ่
แม้ว่าไอคอนวัสดุที่สามารถปรับขนาดให้ขนาดใด ๆ ที่แนะนำ font-size เป็นทั้ง 18, 24, 36 หรือ 48px:
ตัวอย่าง
รหัสต่อไปนี้:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>ผลการค้นหาใน:
cloud
cloud
cloud
cloud
ลองตัวเอง»