How do I get the SVG icon used by the Azure portal for a given Azure resource type?

Let's say I have "Microsoft.Storage/StorageAccounts" as a value in some internal tooling.

I want to display the icon for the corresponding Azure service, like how is done in the Azure portal.

Solution

Go to "All services", the three lines on the left nav.

Open the browser console.

Run

copy(`
<html>
    <body>
        <div id="resource"></div>
        <svg height="100%" width="100%" aria-hidden="true" role="presentation" focusable="false"><use id="bruh" href="#FxSymbol0-01a"></use>
        <script>
            const icons = {
                ${
                    Array.from(document.querySelectorAll("a.fxs-sidebar-flyout-item-link"))
                    .filter(x => x.querySelector(" use[href^='#FxSymbol']"))
                    .map(x => [x.href, x.querySelector("use[href^='#FxSymbol']").href.baseVal])
                    .filter(x => x[0].toLowerCase().includes("resourcetype"))
                    .map(x => [x[0].match("resourceType/(.*)$")[1],x[1]])
                    .map(x => [decodeURIComponent(x[0]), x[1]])
                    .map(x => `"${x[0]}": "${x[1]}"`)
                    .join(",\n")
                }
            };
        
            setInterval(()=>{
                const next = Object.entries(icons)[Math.floor(Math.random()*(Object.values(icons).length))];
                const id = next[0];
                document.getElementById("resource").innerText = id;
                document.querySelector("#bruh").href.baseVal = next[1];
            },500);
        </script>

            ${document.querySelector("#FxSymbolContainer").outerHTML}
            ${document.querySelector("#DefsContainer").outerHTML}
            ${document.getElementsByClassName("MsPortalImpl/Base/Base.Images.css")[0].outerHTML}

    </body>
</html>
`)

This will give you the content that you then paste into a local whatever.html file.

The Azure portal has a block of SVG definitions, and any instances where the portal uses service icons it uses SVGs that just point to the definition

By copying the SVG definitions and the relevant styling elements, we can embed the icons using the exact code that Azure uses to render them.

Open that file in your browser to view the demo. It will cycle through random resource providers and show the corresponding icons. The generated code includes a mapping from resource type to the SVG identifier used by Azure that we replicated.