الأيقونات الأساسية
استخدام الرموز جوجل، إضافة السطر التالي داخل <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 انها محاولة لنفسك » تم تصميم الرموز جوجل ليتم استخدامها مع العناصر المضمنة. و <i> و <span> وتستخدم على نطاق واسع عناصر الرموز.
ملاحظة: 24px الرموز المادية افتراضيا.
لاحظ أيضا أنه إذا قمت بتغيير لون حاوية رمز ولون رمز يتغير أيضا. أشياء الشيء نفسه ينطبق على الظل، وشيء آخر أن يحصل الموروثة باستخدام CSS. والاستثناء هو CSS الملكية حجم الخط، الذي هو دائما 24px، ما لم ينص على شيء آخر.
أيقونات كبيرة
على الرغم من أن الرموز المادية يمكن زيادتها إلى أي حجم، وأوصى حجم الخط هو إما 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
انها محاولة لنفسك »