Question 273860 in Azure Question posted in
The official documentation to get you started can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    Assuming you don’t want to download, you can manually extract these icons directly from the Azure Architecture center which offers these icon downloads as SVGs – https://learn.microsoft.com/en-us/azure/architecture/icons/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search