What Is This String For A SVG Icon And How Do I Get It?

I am using this NPM package @eastsideco/polaris-vue from here. Its basically a way to use Shopify's Polaris framework but instead of React you can use Vue.js. Which is what I want.

One issue I'm having is the Shopify Icons. Here in the example page they are using this long string of characters instead of the SVG icon. See this:

icon: '<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path d="M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z" fill-rule="evenodd"></path></svg>'

And that totally works! I was able to also use it in my pages. I have no clue what that string is or where it comes from. So my question is how can I get that for other icons? For example this cart Icon from the Shopify Icon explorer page.

I open the web console and see something but its not the same as above. How in the world can I translate the icons I see to the string above?

It's not a random string but a regular svg. All special characters like <>" are replaced with HTML entities.

An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard. Reference: https://developer.mozilla.org/en-US/docs/Glossary/Entity

Here is a list of the entities in provided svg:

• < = <
• " = "
• >= >

To replace it in any svg just use "find and replace" in your code editor, it's the easiest way.

In case you need more entities here is full list: https://dev.w3.org/html5/html-author/charref