While preparing for my Global Azure Bootcamp presentation (I’m presenting on the topic: Azure Monitoring – What are the options and how do I use them?), I was in need of some of the latest icons and logos for various Azure services.
Although you can find some (maybe most) online with a quick search, you can’t find them all, nor can you necessarily find the icons for preview features/services or re-designed icons.
The solution, although a little work, is to take the logos from the Azure portal itself. Here’s how.
Example
For the purpose of demonstration, let’s look at the Service Map icon/logo. In Log Analytics, it looks something like this:
Service Map Icon
But, if you look in the portal itself, we have a nicer graphic.
Service Map – Alternative Icon
Wouldn’t it be nice to be able to use the nice icon graphic from the portal in a presentation? Of course, it would!
Searching For SVGs
In the portal, all the icons are created as Scalable Vector Graphics (SVG) which is an XML-based vector image. Why SVGs are better, is because it’s mathematical, and can scale the image without losing quality. None of that pixilated issues if the original image was too small.
Example of Pixelated Image
To be able to use this nice graphic, we need to find the specific SVG within the Azure portal code! Not a small feat, but not impossible.
The first thing we need to do is find a blade that has the icon we want on it. In this example, I am in the Log Analytics blade.
From there, if you go into the developer view in your browser (F12 in Chrome), you’re able to view the code that makes up the views, blades, etc.
Azure Portal – Webpage Code
Now we have to navigate through the html, divs, etc. to find the right block of code. At least in Chrome (I’m not sure about the other browsers), when you hover over a
Azure Portal – Code View – Div Block
Eventually, you will find the right list item (<li>) that corresponds to the specific item.
Azure Portal – Code View – List Item
Within that list item, there will be another DIV block with an SVG block inside of it, but this is not the SVG you’re looking for.
Azure Portal – Code View – DIV-SVG Block
If you expand the first <svg> code block, you will see a <use> block, and a “#shadow-root (closed)” reference. Within that, there is another <svg> block. This is the one you need.
Azure Portal – Code View – Div-SVG-InnerSVG
Right-click on this “inner” SVG code block and choose Copy Element.
Azure Portal – Code View – Copy Element
Recreating
Now we can reap our rewards from this treasure hunt. We are going to use the awesome Azure Portal SVG Fixer tool to produce a useable SVG file of the icon, complete with proper colouring!
Paste the <svg> code that we copied from the Azure portal into the Input field. Notice, when you tab-off/out of the input box, we see a black silhouette of the icon.
Azure Portal SVG Fixer – Input
When you click the Convert button, it will fill in the colours (as they have been defined in the portal for the real icon itself).
Azure Portal SVG Fixer – Output
All that’s left is to download the SVG file itself. Then, in PowerPoint, you can insert a picture, choose the SVG file, and, drumroll… scale the image as large as you want, without losing quality!
Conclusion
It’s a little unfortunate that we have to go through this round-about way just to obtain some decent quality icon and logo imagery for presentations, documents, etc. It would be nice if Microsoft kept the Microsoft Azure, Cloud and Enterprise Symbol / Icon Set or the Azure Microsoft UX Patterns site/list up to date (even though the Visio icon set is only in blue, not full colour).
But at least with this method, although a little more involved, isn’t overly difficult once you get the hang of it. And, it does give you the ability to grab icons for services/features that are new (i.e. in preview), and in full colour (which is a nice touch).
Now go forth, with this new knowledge, and make your presentations, documents, etc. better! Oh, and don’t forget to tell your friends how to do it too by sharing this article.
Update
Now that you’ve gone through all that hard work of finding the right <svg> code block, etc. here’s something that will make you happy.
After writing this blog, a fellow MVP (Kevin Greene) made me aware of the Azure Icon Downloader Chrome extension. Basically, it does all the hard work for you!
When you’re on the Azure portal, the extension will activate, and automatically discover all the icons present, and give you a nice and easy download option.
Azure Icon Downloader
So now we have 2 options to use, the long way, and the short way. At least, if the Chrome extension doesn’t happen to find the icon on the page, you now know how to dig through the code as an alternative method.