Material Design Icons – MDI ile Sitelerinize Icon Set Nasıl Eklenir

Selam arkadaşlar. Bu yazıda sitelerimizi daha doğrusu arayüzlerimizi hazırlarken Material Design Icon Set’inden faydalanmak hakkında konuşacağız. Daha önce FontAwesome ile ilgili bir yazı yazmıştım, ilgi gördüğü için bir de MDI’den bahsetmeliyiz diye düşündüm. FontAwesome yerine MDI kullanmaya başladım artık projelerimde, size de öneririm. FontAwesome ile ilgili yazıya da buradan ulaşabilirsiniz.

Bilmeyenler için Icon Set Nedir?

İnternet sitelerimiz ya da web projelerimiz için olmazsa olmaz küçük detaylardan biri de ikonlardır. Text kullanarak uzun uzun anlatmak yerine bir printer ikonu koyarız ve tıklandığında yazdırma işlevini göreceğini herkes anlar. Aynı zamanda arayüzü de daha görsel hale getirmiş oluruz. İkon setler de bu işi kolaylaştırmak için hazırlanmış kütüphaneler aslında. Printer ikonu için i taginer mdi-printer yazmanız yetiyor ve bunu yaptığınızda ufak css hareketleri ile botunu, rengini, animasyonunu ve artık daha başka ne fanteziniz varsa uygulayabiliyorsunuz. Bu kütüphaneler eğer çok kullanılan kütüphaneler ise sürekli güncelleniyor ve ihtiyaçlarımızı karşılamaya çalışıyor. Biz de kolayca işimizi halletmekten keyif alıyoruz.

Hadi Başlayalım

Öncelikle Material Design Icons sayfasına buraya tıklayıp bir göz gezdirelim. Siteye girdiğinizde direk anasayfada ikonların listesini göreceksiniz. Hemen üst kısımda da bir “Search” bölümü var, ihtiyacınız olan ikonu ingilizce olarak arayabilir, istediğiniz ikonu ve benzerlerini bulabilirsiniz. 

Getting Started bölümüne geldiğimizde, sağ tarafta hangi platformlar/teknolojiler ile MDI kullanabileceğimizi görüyoruz. Angular, React, VueJS gibi teknolojiler ile kullanmak için çeşitli kılavuzlar bu bölümde mevcutlar ancak biz en basit haliyle, bir Html arayüzde bu ikonseti nasıl kullanacağız ve nasıl ekstralarımız var onu görelim. 

Öncelikle kütüphanemizi çalışmamıza dahil etmemiz gerekiyor. CDN ile uzaktan dahil edebiliriz ya da dosyaları indirip dahil edebiliriz. CDN ile dahil etmek için aşağıdaki kodu head tag’leriniz arasına yapıştırmanız yeterli ancak siteniz yüklenirken bu adrese gidip kütüphaneyi getirmeye çalışırken sitenizi bekleteceğinden bu yöntemi her ne kadar hızlı ve kolay olsa da önermiyorum.

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.2.45/css/materialdesignicons.min.css">

Bu kodu eklediğimizde artık MDI classlarını kullanabilir hale geliyoruz. 

Dosyaları indirip kendi projemizin içine alarak kullanmak için buraya tıklayıp sağ üst köşedeki “Download” butonuna tıklıyoruz. Karşımıza gelen ekranda “Download the Webfont” butonuna tıklayıp zip dosyasını indiriyoruz. İndirdiğimiz dosyaların içerisindeki css ve fonts klasörlerini projemizden erişilebilir -assets klasörümüz gibi- bir yere kopyalamamız gerekiyor. Sonrasında projemizde header kısmında head tag’leri arasında aşağıdaki kodu projemize göre düzenleyerek yapıştırıyoruz.

<link rel="stylesheet" href="projedizini/projeassetsdizini/css/materialdesignicons.min.css">

Bu işlemleri tamamladıktan sonra artık ikon setimizi kullanabilir hale geliyoruz. Şimdi bir kaç örnekle nasıl kullanacağımıza bir göz atalım.

Buraya tıklayarak 5.2.45 sürümüne dahil tüm ikonları listeleyebilirsiniz. Aynı zamanda sayfanın en altına indiğinizde kullanım örneklerini de görebilirsiniz. Yine de biz burada Türkçe olarak aktaralım ve kendi yorumlarımızı yapalım.

Standart bir kullanım için aşağıdaki kodu kullanabilirsiniz;

<span class="mdi mdi-folder-multiple-image"></span> // span ile
<i class="mdi mdi-folder-multiple-image"></i> // i tagi ile

Bir de örnek bir kullanım yapalım, mesela bir listeleme yapıyoruz ve her maddenin solunda ikon kullanacağız;

<ul class="listem">
   <li>
      <a href="#">
         <i class="mdi mdi-check-bold"></i>
         Madde 1 Tamam!
      </a>
   </li>
   <li>
      <a href="#">
         <i class="mdi mdi-check-bold"></i>
         Madde 2 Tamam!
      </a>
   </li>
   <li>
      <a href="#">
         <i class="mdi mdi-check-bold"></i>
         Madde 3 Tamam!
      </a>
   </li>
</ul>

Gördüğümüz üzere kullanımı oldukça basit. Kullanacağımız ikonun ismini bulmak ve yazmak kalıyor sadece bize. Böylelikle hem projelerimizi daha görsel hale getirebiliyoruz hem de vakit kaybetmeden projelerimizde pratik bir şekilde ikonlarımızı kullanabiliyoruz. 

Kullanışlı Özellikler

Bunların haricinde MDI bizlere bazı imkanlar sunmuş. Size, Rotate, Flip, Spin ve Color özelliklerini kullanarak css yazmadan çoğu ihtiyacımızı yine olayın amacına uygun bir şekilde pratik olarak halledebiliyoruz. 

Size: İkonun boyutunu ayarlamamıza izin veriyor. Örneğin “mdi-18px, mdi-24px” gibi classlar ile ikonların boyutunu projemizde nasıl kullanmak istiyorsak o şekilde özelleştirebiliyoruz.

Rotate: İkonu açı değeri vererek döndürmemize imkan sağlıyor. “Hafif şöyle sağa dönse” falan dediğimiz durumlar için yardımcı oluyor. Örneğin “mdi-rotate-45, mdi-rotate-315” gibi classlar ile döndürme işlemini sağlayabiliyoruz.

Flip: Rotate özelliğinin kısaltılmış hali gibi düşünebiliriz. Yatay ya da dikey yönlendirme yapmamıza izin veriyor. Sitesinde yazdığı uyarıya göre hem rotate hem flip özelliğini aynı anda kullanamıyormuşuz ancak ben denemedim. Zaten neden kullanasınız ki? Örneğin “mdi-flip-h, mdi-flip-v” classları ile horizontal ve vertical döndürmeler yapabiliyoruz.

Spin: En sevdiğim özelliklerden birisi. İkonumuza rotate animasyonu ekliyor. Bir yükleniyor efekti hazırlamak istediğinizde bir yıldızı sürekli döndürebilirsiniz ya da artık hangi ikonu döndürmek isterseniz. Örneğin “mdi-spin” classı ile bu işlemi sağlayabiliyoruz.

Color: Renklendirmek olarak aklımıza gelse de aslında sarı mavi turuncu gibi renklerden ziyade açık/koyu gibi seçenekleri bizlere sunan özellik “mdi-light, mdi-inactive, mdi-dark” olarak kullanılıyor. Aynı zamanda “mdi-light mdi-inactive” gibi bir kullanımda da işlevini yerine getiriyor. 

Evet yazımızın sonuna geldik. Bu arada SVG, JS, XAML ya da PNG gibi kullanımları için burayı ziyaret edebilirsiniz. Kütüphaneyi hazırlayanlar bizlere her türlü imkanı vererek Web, Android, iOS, Windows ya da Mac platformlarında işlerimizi kolaylaştırmak için baya uğraşmış ve ortaya güzel bir iş çıkartmışlar. Artık bize de projelerimizde kullanmak kalıyor.

Başka bir yazıda tekrar görüşmek üzere!