Materyal Simgeleri nedir?
En yeni simgelerimiz olan Materyal Simgeler, çok çeÅitli tasarım varyantlarına sahip tek bir yazı tipi dosyasında 2.500'den fazla glifi birleÅtiriyor. Semboller, üç stilde ve dört ayarlanabilir deÄiÅken yazı tipi ekseninde (dolgu, aÄırlık, derece ve optik boyut) kullanılabilir. Malzeme Sembolleri KitaplıÄı'nda Malzeme Sembolleri setinin tamamını görebilirsiniz.
FILL
eksen
Dolgu, varsayılan simge stilini deÄiÅtirebilmenizi saÄlar. Tek bir simge, hem doldurulmamıŠhem de doldurulmuÅ durumları oluÅturabilir.
Bir durum geçiÅini iletmek için animasyon veya etkileÅim için dolgu eksenini kullanın. DeÄerler, varsayılan için 0 veya tamamen doldurulmuÅ için 1'dir. Dolgu, aÄırlık ekseniyle birlikte simgenin görünümünü de etkiler.
wght
eksen
AÄırlık, simgenin fırça aÄırlıÄını tanımlar ve ince (100) ile kalın (700) arasında bir aÄırlık aralıÄı saÄlar. AÄırlık, simgenin toplam boyutunu da etkileyebilir.
GRAD
eksen
AÄırlık ve derece, simgenin kalınlıÄını etkiler. Notlandırma düzenlemeleri, aÄırlık düzenlemelerinden daha ayrıntılıdır ve simgenin boyutu üzerinde küçük bir etkisi vardır.
Not verme özelliÄi bazı metin yazı tiplerinde de kullanılabilir. Uyumlu bir görsel efekt için metin ve sembolleri sınıf seviyelerini eÅleÅtirebilirsiniz. ÃrneÄin, metin yazı tipinin not deÄeri -25 ise semboller metni -25 gibi uygun bir deÄerle eÅleÅtirebilir.
Notu farklı ihtiyaçlar için kullanabilirsiniz:
DüÅük vurgu (ör. -25 derece): Koyu bir arka plan üzerinde ıÅık simgesi için parlamayı azaltmak için düÅük bir derece kullanın.
Yüksek vurgu (ör. 200 derece): Bir simgeyi vurgulamak için pozitif dereceyi artırın.
opsz
eksen
Optik boyutlar 20 dp ile 48 dp arasında deÄiÅir.
Resmin farklı boyutlarda aynı görünmesi için çizgi kalınlıÄı (kalınlık) simge boyutu ölçeklendikçe deÄiÅir. Optik boyut, sembol boyutunu artırdıÄınızda veya azalttıÄınızda fırça aÄırlıÄını otomatik olarak ayarlamak için bir yol sunar.
Materyal Simgelerini Alma
Materyal Sembolleri, çeÅitli biçimlerde mevcuttur ve hem uygulama geliÅtiricileri hem de modelleri veya prototiplerindeki tasarımcılar için farklı proje ve platform türleri için uygundur.
Lisanslama
Malzeme Sembolleri, Apache Lisans Sürümü 2.0 altında bulunmaktadır.
Simgeleri tek tek göz atma ve indirme
Malzeme Simgeleri setinin tamamı, Malzeme Sembolleri KitaplıÄı'nda SVG veya PNG biçimlerinde mevcuttur. Web, Android ve iOS üzerinde veya tüm tasarım araçlarında kullanılabilir.
Git kod deposu
git deposunda SVG biçiminde Malzeme Sembolleri setinin tamamı bulunur.
$ git clone https://github.com/google/material-design-icons
Malzeme Sembollerini Kullanma
Web'de kullan
Malzeme Sembolleri yazı tipi, web projelerine Materyal Simgeleri eklemenin en kolay yoludur.
Simgeler tek bir yazı tipinde bir araya getirilir. Böylece web geliÅtiricileri, yalnızca birkaç satır kod girerek bu simgeleri kolayca ekleyebilir.
Google Fonts ile statik yazı tipi
Herhangi bir web sayfasında kullanmak üzere simge yazı tiplerini ayarlamanın en kolay yolu Google Fonts'u kullanmaktır. Åu tek HTML satırını ekleyin:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Yukarıdaki snippet, 400 aÄırlık, 48 optik boyut, 0 deÄerinde derece ve dolgu (ayrıca 0) olmak üzere her bir eksen için varsayılan yapılandırmayı içerir.
Farklı eksen deÄerleri yapılandırmak için Fonts CSS API'yi kullanın. AÅaÄıdaki örneklere göz atın:
Google Fonts ile deÄiÅken yazı tipi
Simgeleri CSS aracılıÄıyla canlandırıyorsanız veya simge özellikleri üzerinde daha hassas kontrol istiyorsanız Google Symbols deÄiÅken yazı tipini kullanın. number..number
biçiminde aralıklar kullanarak deÄiÅken yazı tipinin tamamını yükleyebiliriz. Kullanıcılarınızın büyük olasılıkla deÄiÅken yazı tipini yükleyip yükleyemeyeceÄini anlamak için DeÄiÅken Yazı Tipleri destek ekibine göz atın. Bazı örnekler:
Hatta animasyon bile oluÅturabilirsiniz.
Yazı tipini kendi kendine barındıran
ÃÄeyi ne zaman güncelleyeceÄinize karar vermek için
simge yazı tipini
kontrolünüzdeki bir konumda barındırın. ÃrneÄin, URL https://example.com/material-symbols.woff
ise aÅaÄıdaki CSS kuralını ekleyin:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Yazı tipini doÄru Åekilde oluÅturmak için simgeyi oluÅturmayla ilgili CSS kurallarını tanımlayın. Bu kurallar normalde Google Fonts API stil sayfasının bir parçası olarak sunulur ancak kendi kendine barındırılırken projelerinize manuel olarak dahil edilmesi gerekir:
.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'de simgeleri kullanma
Yukarıda verilen örneklerde ligatür adı verilen ve sadece metin adını kullanarak simge glifinin oluÅturulmasına olanak tanıyan bir tipografik özellik kullanılmaktadır. Web tarayıcısı, metin baÄlantısını otomatik olarak simge vektörüyle deÄiÅtirir ve eÅdeÄer sayısal karakter referansından daha okunabilir bir kod saÄlar. ÃrneÄin, HTML'nizde bir simgeyi temsil etmek için 
yerine arrow_forward
öÄesi bulunur. DiÄer simgeler için simge adının yılan kılıfını kullanın (ör. boÅlukları alt çizgiyle deÄiÅtirin).
Bu özellik, hem masaüstü hem de mobil cihazlardaki çoÄu modern tarayıcıda desteklenir. Kullanıcılarınızın baÄlantı dizelerini iÅleyip iÅleyemediÄini öÄrenmek için BaÄlantı birimleri desteÄini kullanabilir miyim? bölümüne göz atın. Büyük olasılıkla bu iÅlemleri yapabilirler.
BaÄlantı iÅaretlerini desteklemeyen tarayıcıları desteklemeniz gerekiyorsa, aÅaÄıdaki örnekte olduÄu gibi sayısal karakter baÅvurularını (kod noktaları olarak da bilinir) kullanarak simgeleri belirtin:
Herhangi bir simgeyi seçip simge yazı tipi panelini açarak Malzeme Sembolleri KitaplıÄı'nda hem simge adlarını hem de kod noktalarını bulun. Her simge yazı tipinin, Google Fonts git deposunda tüm ad ve karakter kodlarını gösteren bir kod noktası dizini bulunur.
Materyal Tasarım'da simgelerin stil özelliklerini ayarlama
Bu simgeler, Materyal Tasarım yönergelerine uyacak Åekilde tasarlanmıÅtır ve önerilen simge boyutları ve renkleri kullanıldıÄında en iyi görünürler. AÅaÄıdaki stiller, önerdiÄimiz boyutları, renkleri ve etkinlik durumlarını uygulamayı kolaylaÅtırır.
Android'de kullan
Malzeme Sembolleri KitaplıÄı'nda, tüm simgeler Vektör ÃekilebilirliÄi biçimindedir. Daha fazla bilgi için Android Vector Asset Studio belgelerine göz atın.
iOS'te kullan
Simgeler Apple Sembolleri biçiminde de kullanılabilir. Apple Symbols'un resmi genel bakıÅı ve kullanım kılavuzunu inceleyerek daha fazla bilgi edinebilirsiniz.
Flutter'da kullan
Materyal Semboller için Flutter desteÄi planlanmaktadır. Güncellemeler için bizi takip etmeye devam edin.