How to use a symbol from SVG file in the HTML - html

Question

I have a https://github.com/rajamunuma/test/blame/main/test.svg file with below content
<svg width="100" height="100">
<symbol id="icon-checkmark" viewBox="0 0 16 13">
<title>checkmark icon</title>
<path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/>
</symbol>
<svg>
I would like to use the use the symbol "icon-checkmark" in the html file directly. Something like below
<img src="https://github.com/rajamunuma/test/blame/main/test.svg#icon-checkmark" />
<img src="https://github.com/rajamunuma/test/blame/main/test.svg#svgView(viewBox(0,0,16,13))" />
Note: I cannot directly copy the content of svg file into my html file. I want to refer to svg file path and include it on the html page.

Answer 1

You need to define symbol icon like below snippet.
I hope below snippet will help you a lot.
Helpful link:
https://css-tricks.com/svg-symbol-good-choice-icons/
.icon {
stroke: unset;
stroke-width: 0px;
fill: currentColor;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
}
<svg class="icon">
<use href="#icon-checkmark"></use>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-checkmark" viewBox="0 0 16 13">
<path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/>
</symbol>
<svg>