title: SVG icons on a round circle side by side another div, Bootstrap 4.5
body: <p>I started to get into Bootstrap 4.5 and SVG for icons. I'm having a tough time understanding how it works atm. I want to place the SVG inside a shape (rounded-circle) for now. But would like that shape to be side by side another div. I can't move the div to place them on the same line. Following is a code snippet.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.svg-icon {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
  }
  
  .poll-icon-container {
    height: 50px;
    width: 50px;
    position: relative;
    border-radius: 50%;
    background-color: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rounded-circle poll-icon-container text-success"&gt;
    &lt;svg
      width="2em"
      height="2em"
      viewBox="0 0 18 18"
      class="bi bi-box-arrow-in-up-right svg-icon"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    &gt;
      &lt;path
        fill-rule="evenodd"
        d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
      /&gt;
      &lt;path
        fill-rule="evenodd"
        d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
      /&gt;
      &lt;path
        fill-rule="evenodd"
        d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
      /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  &lt;div&gt;
    should be on the right side of the icon 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>