title: How to swap out simple SVG icons when it's clicked using HTML, CSS, and jQuery?
body: <p>This is an elementary question, but after reading other people's questions, articles and tutorials, I'm still in the dark when it comes to inline SVG icons and how to properly handle them in HTML, CSS, and jQuery. </p>
  
  <p><strong>My goal:</strong> when I click <strong>+ icon</strong>, it changes to <strong>–icon</strong>.</p>
  
  <p><strong>What I did:</strong> I downloaded two SVG icons from Noun project. Then I added the code for <strong>+ icon</strong> in my HTML markup. Here is what it looks like so far. </p>
  
  <p><a href="http://jsfiddle.net/461jaLxt/" rel="nofollow noreferrer">http://jsfiddle.net/461jaLxt/</a></p>
  
  <pre><code>&lt;div class="border"&gt;&lt;/div&gt;
                  &lt;div class="clickableList"&gt;
                      &lt;span class="types"&gt;Swap icons&lt;/span&gt;
                      &lt;svg width="20px" height="20px" viewBox="0 0 74 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
                          &lt;title&gt;noun_1776266_cc&lt;/title&gt;
                          &lt;desc&gt;Created with Sketch.&lt;/desc&gt;
                          &lt;defs&gt;&lt;/defs&gt;
                          &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
                              &lt;g id="noun_1776266_cc_2" transform="translate(0.000000, -1.000000)" fill="#000000" fill-rule="nonzero"&gt;
                                  &lt;g id="Group" transform="translate(0.000000, 0.637820)"&gt;
                                      &lt;polygon id="Shape" points="33 0.36218 33 33.36218 0 33.36218 0 41.3622 33 41.3622 33 74.3622 41 74.3622 41 41.3622 74 41.3622 74 33.36218 41 33.36218 41 0.36218 33 0.36218"&gt;&lt;/polygon&gt;
                                  &lt;/g&gt;
                              &lt;/g&gt;
                          &lt;/g&gt;
                      &lt;/svg&gt;
                  &lt;/div&gt;
  
  .types {
    font-size: 20px;
    font-family: arial;
  }
  
  $('.clickableList').click(function() {
  event.preventDefault();
  </code></pre>
  
  <p>Now I have to add the second icon, and this part is what I've been stuck on for a while. Below is the markup for the second icon but I can't figure out how and where to add it in my html so later when the first icon is clicked, it would change to this second icon. </p>
  
  <pre><code>&lt;!-- second SVG--&gt;
  &lt;svg width="20px" height="20px" viewBox="0 0 74 74" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;title&gt;noun_line_1776294&lt;/title&gt;
  &lt;desc&gt;Created with Sketch.&lt;/desc&gt;
  &lt;defs&gt;&lt;/defs&gt;
  &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
      &lt;g id="noun_line_1776294" transform="translate(-6.000000, -31.000000)"&gt;
          &lt;g id="Group" transform="translate(0.000000, 0.637820)"&gt;
              &lt;polygon id="Shape" fill="#000000" fill-rule="nonzero" points="6 30.36218 6 38.36218 68 38.36218 68 30.36218"&gt;&lt;/polygon&gt;
              &lt;rect id="Rectangle" x="0" y="0" width="74" height="69"&gt;&lt;/rect&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>