material icons

أيقونات المواد

أحدث خطوط الأيقونات و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 في إنشاء تطبيق React، 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 لجميع الخطوط. قد يتسبب هذا في قيام أدوات الإنشاء، مثل حزمة الويب، بنسخ جميع الخطوط إلى دليل الإنشاء حتى لو كنت لا تستخدمها جميعًا. لتقليل حجم البنية، قم باستيراد الأنماط التي تحتاجها فقط. على سبيل المثال، إذا كنت تحتاج فقط إلى أيقونات مملوءة ومحددة، قم باستيراد 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	ساس
مملوء	fill.css	fill.scss
المبينة	Outlined.css	Outlined.scss
دائري	round.css	round.scss
حاد	حاد.css	Sharp.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

وبدلاً من ذلك، يمكنك استخدام فئات CSS بدلاً من الحروف المركبة لعرض الرموز. يتعلم أكثر

الأيقونات المتوفرة

انظر التجريبي.

رخصة

يتم إنشاء أيقونات التصميم متعدد الأبعاد بواسطة Google.

لقد جعلنا هذه الرموز متاحة لك لدمجها في منتجاتك بموجب ترخيص Apache الإصدار 2.0. لا تتردد في إعادة مزج هذه الرموز والوثائق وإعادة مشاركتها في منتجاتك. نحن نرغب في الإسناد في ما يتعلق بالشاشة في تطبيقك، ولكنه ليس مطلوبًا.