Pasting HTML code gives different results than pasting SVG.

As an example, I’ll use this icon: https://tabler-icons.io/i/plus

This is the template I used:

<button class="btn btn-primary">
<!-- here goes the code -->
Example button
</button>

Code:

<i class="ti ti-plus"></i>

Result:

Code:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <line x1="12" y1="5" x2="12" y2="19"></line>
   <line x1="5" y1="12" x2="19" y2="12"></line>
</svg>

Result:

Is it possible to have the same results with webfont/CSS as with SVG?

[codecalm]

@dekoza try to add icon class to <i> element

[dekoza]

I needed to add me-2 class. There has to be a better way 😉