title: How to use svg icons just like "font awesome" icons
body: <p>I am new to front-end development. And one of the sample project that I am going through uses "font awesome" icons instead of images. <a href="http://fontawesome.io/" rel="noreferrer">Font-Awesome Link</a> And every where instead of <code>&lt;img src&gt;</code> all I find is <code>&lt;i class= ""&gt;</code>. I researched a little and found out these icons are basically svg files. So, I created couple of svg files for learning purpose. But I don't know how to correctly include svg files. </p>
  
  <p><strong>Question 1:</strong> So I am putting svg files in my own project and calling them like  <code>&lt;img src = "images/sms_connect_logo.svg"/&gt;</code>. I am able to see the icon but is it the right way to add icons. I wanted to use something like <code>&lt;i class = "blabla"&gt;</code> to get the desired result as its done in sample project.</p>
  
  <p><strong>Question 2:</strong> Currently, the icon I have created is of black colour. I want it to be light gray in colour. So do I need to create another SVG file of same icon with light gray colour so the same black icon can be changed to gray by some css tweaking. (Using the Power of SVG files).</p>
  
  <p>I am totally new so I might not have asked question the right way. Please let me know if I am missing something.</p>
  
  <p>Thanks! </p>