title: Bootstrap dropdown-toggle doesn't work with svg wrapped in an object tag
body: <p>When I put my svg inline in the html and put a dropdown-toggle class in it, it works perfectly.
  But when I wrap it with an object tag it shows the svg itself but when I click on it it doesn't show the dropdown menu, or shortly - it doesn't work.</p>
  
  <p>Here is the code that works with the inline svg:</p>
  
  <pre><code>&lt;div class="dropdown pull-left"&gt;
      &lt;svg class="sidebar-icon-size notifications-icon dropdown-toggle" 
           data-toggle="dropdown" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 12.7 14" style="enable-background:new 0 0 12.7 14;" xml:space="preserve"&gt;
          &lt;path d="M6.1,9.5c-1.6,0.6-2.7,1.3-3.4,1.9c0.5,0.5,1.5,0.6,2.4,0.2c1.2-0.4,1.9-1.5,1.7-2.3c0,0,0,0,0,0C6.5,9.3,6.3,9.4,6.1,9.5
              M7.1,12.2c-3.1,1.1-5.6,0.5-5.7,0.2c-0.2-0.5,1-2.2,4.5-3.5c3.5-1.3,5.5-0.8,5.7-0.2C11.7,9,10.1,11.1,7.1,12.2 M10,5.8
              C8.2,1.9,7.3,0.5,4.3,0.5c-1.1,0-0.8-0.8-1.6-0.5C1.9,0.4,2.6,0.8,1.8,1.5c-2.3,1.9-2.1,3.6-1,7.8c0.4,1.7-1.1,1.8-0.5,3.5
              C0.7,14,4,14.5,7.4,13.3c3.4-1.3,5.6-3.8,5.2-5C12,6.5,10.8,7.5,10,5.8" /&gt;
      &lt;/svg&gt;
      &lt;ul class="topbar-menu dropdown-menu pull-right" style="width:200px;"&gt;
          &lt;li&gt;blabla 1&lt;/li&gt;
          &lt;li&gt;blabla 2&lt;/li&gt;
          &lt;li&gt;blabla 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the code that doesn't work with the wrapper object tag:</p>
  
  <pre><code>&lt;div class="dropdown pull-left"&gt;
  
      &lt;object class="topbar-icon-size notifications-icon dropdown-toggle"
                              data-toggle="dropdown" 
                              data="../../Styles/Icons/Notifications.svg"
                              type="image/svg+xml"&gt;&lt;/object&gt;
      &lt;ul class="topbar-menu dropdown-menu pull-right" style="width:200px;"&gt;
          &lt;li&gt;blabla 1&lt;/li&gt;
          &lt;li&gt;blabla 2&lt;/li&gt;
          &lt;li&gt;blabla 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried removing the dropdown-toggle class and the data-toggle attribute from the object tag so that they remain only in the svg file, I tried vice versa, to remove them from the svg file and put them only in the object tag, I tried when they are on both but it didn't work anyhow.
  Any help would be appreciated.
  Thanks :)</p>