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.