الماتريال ديزين  (تصميم المادة) هو تصميم ابتكرته غوغل ويستحوذ على مجموعة كبيرة من المواقع وجميع تطبيقات غوغل تقريبا.
  يضم الماتريال ديزين العديد من القواعد تجعل الأيقونات التي يستخدمها مغايرة للأيقونات العادية لذا أنشأت جوجل هذه الأيقونات.












الآن بعد ان عرفت كيف تستخدم هذه الأيقونات الآن كيف تحصل عليها
لإظافة الأيقونات لموقعك يكفي وضع استدعاء على هذا الشكل في head :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet"> 

أو عن طريق تحميل الخط واستعماله كباقي الخطوب من الرابط https://github.com/google/material...
واستعماله عادي مثال:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

وتحديد الفئة (الكلاس) كالتالي لاستعمال الأيقونات:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* الحجم الإفتراضي للأيقونة */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* لجميع متصفحات WebKit . */
  -webkit-font-smoothing: antialiased;
  /* سفاري وكروم . */
  text-rendering: optimizeLegibility;

  /* لفير فوكس. */
  -moz-osx-font-smoothing: grayscale;

  /*  لإنترنت إكسبلور IE. */
  font-feature-settings: 'liga';
}

وأخيرا اختيار الأيقونات!
- الأمر بسيط فقط توجد إلى هذا الرابط انتقال  ستجد الأيقونات اضغط على الأيقونة التي تريد إظافتها ستضهر لك في الأسفل قائمة :


عند اختيار الخط سيضهر لك خياران الخيار الأول عن طريق وضع إسم الأيقونة بحيث يمكن تحديدها
والخيار الثاني هو لإظافته بالطريقة العادية أي رمز الأيقونة.

أما الصور فتقوم بتحميلها وتستعملها كأي صورة.
أرجو ان يكون الشرح مفيدا والسلام عليكم.