title: How to define a template to re-use a SVG graphic button in HTML/CSS?
body: <p>For a dashboard html page, I need a lot of round buttons with a &quot;-&quot; or &quot;+&quot; sign.</p>
  <p>This is how the buttons look:</p>
  <p><a href="https://i.stack.imgur.com/AyZkH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AyZkH.png" alt="buttons" /></a></p>
  <p>The code below works fine in Chromium.</p>
  <p>Repeating the complete design for each button makes the code hard to read.</p>
  <p>For each button, only the <strong>id</strong> and the text <strong>+/-</strong> change.</p>
  <p>Is there a way to define this as a <strong>button template</strong> and <strong>resuse</strong> the button?</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-html lang-html prettyprint-override"><code>&lt;div class="item2" style="padding: 0px"&gt;
                  &lt;svg id="minus1" height="60" width="60"&gt;
                      &lt;circle cx="30" cy="30" r="28" stroke="black" stroke-width="2" fill="white"/&gt;
                      &lt;text x="15" y="48" fill="black" style="font-weight: bold;font-size: 50px;text-align: center;user-select: none"&gt;-&lt;/text&gt;
                  &lt;/svg&gt;
              &lt;/div&gt;
              &lt;div class="item2" style="padding: 0px"&gt;
                  &lt;svg id="plus1" height="60" width="60"&gt;
                      &lt;circle cx="30" cy="30" r="28" stroke="black" stroke-width="2" fill="white"/&gt;
                      &lt;text x="15" y="48" fill="black" style="font-weight: bold;font-size: 50px;text-align: center;user-select: none"&gt;+&lt;/text&gt;
                  &lt;/svg&gt;
              &lt;/div&gt;
              &lt;div class="item1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>