title: SVG icons : viewBox not scale size correctly
body: <p>I'm using Bootstrap with SVG icons from material.io : <a href="https://material.io/resources/icons/?style=baseline" rel="nofollow noreferrer">https://material.io/resources/icons/?style=baseline</a>
  The problem is, SVG icon don't scale up when I copy the code inside in my HTML page.
  I set width="48" and height="48" with viewBox="0 0 48 48" but even if the viewport is correct, the size of the picture remains 24x24 pixels...</p>
  
  <p>What can I do to scale the picture to the viewport selected (48x48) ?</p>
  
  <p>I tried width="48", height="48", viewBox="0 0 24 24" and I was close to the result I want.</p>
  
  <p>The code: </p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" &gt;&lt;path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/&gt;&lt;path d="M0 0h24v24H0z" fill="none"/&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>I know that width and height is for the viewport and viewBox to set size between 0 et viewport limits for the picture, but maybe I miss some details.</p>