Search code examples
azuresvg

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.

enter image description here

Solution

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

    all services

    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

    element picker showing reference

    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.

    cycling icon demo