Gaurav Mantri's Personal Blog.

Azure Icon Font For Your Web Application

For both Cloud Portam website and application, when it comes to icons we don’t use images. Almost invariably, we use vector icons and icon fonts (like Font Awesome which BTW are very aptly named; they are indeed really-really awesome :)).

Where Font Awesome didn’t work for us was icons for Azure specific things. In the past, we have been helped by Jigar Patel, who works with my good friend Dinesh Agarwal (who BTW runs an awesome startup called Pro Start Me … do check it out!). But given that Azure is adding a new service almost every month, I felt a bit awkward going to Jigar and Dinesh to ask for new icons (not that they would have said not …. but I remembered that story …. teach a man to fish :)). So this time I thought I will give it a try myself!

The icons are alive and kicking on Cloud Portam’s website at Check them out!

This blog post talks about how I created these icons. For a creatively challenged individual like me whose favorite color is either blue or grey :), it was quite an experience!

Step 1: Download the Visio Files

To begin with, I did not create these icons from scratch! Content team from Microsoft has already done a marvelous job of creating Azure architecture diagrams which are available for you to download and use them in your own presentations, drawings and whatnots. You can download them from here: (direct download link: Download the zip file and extract it. Once you have extracted the files, you would want to go to “CnE_VisioStencils” folders and open “CnE_CloudV2.22.vss” file in Visio. This is where the magic happens :).



Step 2: Create SVG Files

Next step is creating SVG (Scalable Vector Graphics) file for these symbols. Now you can do it either the hard way or the easy way :).

Step 2.1: Create SVG Files – The Hard Way

Visio has this functionality where you can export each item in the stencil to SVG format manually (thus, “The Hard Way”). To convert an item in the stencil to SVG format, select that item, then right click to “Edit Master” context menu item to “Edit Master Shape”.


Even though you don’t see anything on the subsequent screen but just go ahead and save it as a SVG file using File and then Save As option.


Once the file is saved as SVG file, you should be able to load that file in the browser and see how it looks!


Pretty simple huh!

But there are about 100 or so shapes and converting them would take a lot of time! In fact, this is how I started but after I converted about 5 or 10 of the shapes I thought there must be a better way of doing things. That’s when I figured out the easy way.

Step 2.2: Create SVG File – The Easy Way

What’s the easiest way for programmers like us to solve a problem? Write code, obviously :). So I thought, there must be a way to create these files programmatically. A little bit of searching led me to a few questions on Stack Overflow and MSDN documentation and based on that I wrote a console app, which would take a shape and export it in SVG format. Now, that’s simple! Here’s the code I used:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Office.Interop.Visio;
namespace ConsoleApplication1
    class Program
        static void Main(string[] args)
            Application app = new Application();
            app.Visible = false;
            var doc = app.Documents.Add("D:\\CnE_CloudV2.22.vss");
            foreach (var item in doc.Masters)
                var masterItem = (Master) item;
                var fileName = @"D:\Azure Icons SVG\" + masterItem.Name.Trim().Replace("\r", "").Replace("\n", "") + ".svg";
                if (File.Exists(fileName))
                var shapes = masterItem.Shapes;
                foreach (var item2 in shapes  )
                    var shape = (Shape) item2;

Step 3: Create Icon Font

Last step in the process is to create the icon font. Again, I didn’t do anything special :). I just used IcoMoon’s Font creator app – Simply head over there, select all the SVG files by clicking on “Import Icons” button, select the icons you want to include in the font and then click on “Generate Font” button to create your own font icon!


It’s as simple as that. Now the import SVG has some quirks and you may have to edit the SVG icons a little bit before you actually create the font but that’s minor stuff. Most of the heavy lifting is done by this app for you.

Once you download the font, you get everything you need to get going even including a demo HTML file that you can use as a reference.


If you don’t want to go through the trouble of doing all of this, the work I have created is available for you to download. You can download it from Cloud Portam’s website at:

Go ahead, download it and use it in your web application! Be sure to let me know your feedback. I know they are not perfect but I think it’s a good starting point. If something is not working out for you, do let me know and I will try my best to get them fixed.


What’s New In Azure Storage

It’s been a while that I wrote a blog post about Azure Storage :). Earlier this month, Azure Storage Team released a new version of Storage Service and included a lot of awesome goodness! In this blog post, I will try to summarize those. So … [Continue reading]

Azure Service Bus – As I Understand It: Part II (Queues & Messages)

Continuing from my previous post about Azure Service Bus, in this post I will share my learning about Queues & Messages. The focus of this post will be about some of the undocumented things I found as we implemented support for Queues and … [Continue reading]

Azure Service Bus – As I Understand It: Part I (Overview)

Recently we started working on including support for Azure Service Bus in Cloud Portam. Prior to this, I had no experience with this service though it has been around for quite some time and I always wanted to try this out but one thing or another … [Continue reading]

Understanding Azure Premium Storage – A Developer Perspective

As you may already know Azure Premium Storage is the latest offering from Azure Storage which is designed specifically to handle Virtual Machine workloads. A few weeks back we included support for managing Premium Storage in Cloud Portam. There were … [Continue reading]

Prarambh 2015 – A Recap

Over the weekend of Feb 20 - 22nd 2015, Indian Institute of Management (IIM) Udaipur’s Entrepreneurship Cell “Saksham” organized a 32 hour startup challenge event (Prarambh). This was the 2nd time an event like this was organized (and I'm extremely … [Continue reading]

What Startup Founders Can Learn From Ocean’s Eleven Movie

I’m a huge fan of movie Ocean’s Eleven. In fact, I watch this movie every time it comes on TV. For those who don’t know about this movie, in short it is a heist film where George Clooney along with 10 other folks rob three Las Vegas casinos in one … [Continue reading]

Azure SDK 2.5 and Cloud Service Diagnostics

Recently Azure team announced the availability of SDK 2.5. You can read the release notes here: One of the major change that was done in this release is related to diagnostics. In this post … [Continue reading]

Azure Search Service – Some Documented/Undocumented Business Rules

As you may already know, for past 2 weeks we have been implementing support for Azure Search Service in Cloud Portam. We released a newer version yesterday (more on this here). Currently there is no SDK available for this service and we ended up … [Continue reading]

Cloud Portam Now Supports Azure Search Service


I’m pleased to announce that today we released a new version of Cloud Portam which includes support for Azure Search Service which was announced recently. This blog post talks about Azure Search Service features currently supported in the … [Continue reading]