SharePoint 2013 and Office 365 diverge even further – different icon sets

During a meeting with a customer yesterday, they spotted something amusing that I hadn’t noticed until they pointed it out. Have a look at the following screenshot from Office 365 and see if you can spot the issue as well:

difficons1

 

And, did you discover it? The Edit Item button isn’t using it’s regular icon, but uses the same as the Delete Item button! Here’s how it should look like usually:
difficons2

Now, the issue isn’t caused by Office 365 directly. In this case, we have some  JavaScript that does some smaller DOM manipulations, and replaces the Edit Item button with a different one (but which looks just the same). The code that gets inserted into the DOM contains the image as follows: <img style=”left: -511px; top: -103px;” src=”/_layouts/15/1033/images/formatmap32x32.png?rev=23″ unselectable=”on”>

This works perfectly fine in older versions of SharePoint as well as SharePoint 2013, but in Office 365 you get the Delete icon for the position left: -511px; top: -103px. The correct position in Office 365 is left: -511px; top: -137px. What SharePoint actually does is not to use a separate image file for each icon, put rather “store” all icons in a single image to save on bandwidth and increase performance (to learn more about this, visit your preferred search engine and look for “CSS sprites”). And exactly this image (formatmap32x32.png) is different in SharePoint 2013 (the same for RTM all the way to SP1) and Office 365. How different? Have a look at the animation which shows both version for a second each:

output_geDlNX

 

So, what does all this mean?

Just recently, changes to the DOM of Office 365 pages that made it different from the one in SharePoint 2013 were made by Microsoft, see e.g. the blog posts “Office 365 Update Changes ‘Display Name’ on Required Fields” by Marc D Anderson and “Office 365 Needs to Treat the UX as an API if Our Customizations are to Stay Off the Server” by Andrew Connell (ok, I just have to make a Star Wars reference here: “I am altering the DOM, pray I don’t alter it any further”). In my opinion, this change here falls into a similar category, with Microsoft making a small change in the background that can have a negative effect on customizations that rely on the icons. For example, if you want to use the same icons as default SharePoint, and thus make use of the same code, you now need to be careful that things like the issue I mentioned at the top of this blog post don’t occur in your solutions. So don’t just simply rely on the fact that it may have worked before, but make sure that if you’re using SharePoint icons, the correct one is indeed used.

And as final words,

Share This

Rene Modery

Microsoft Office Servers and Services MVP, working as a Solutions Architect (SharePoint, Office 365) in Singapore