The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.
Icons can be placed both to the left and right of an action, link or label.
We noticed that icons were being placed on both sides of labels, links or button links and decided to create a general pattern for it.
Place the icon on the left side of the link to make it stand out, become easier to understand, or used simply as a decorative element.
Examples of icons placed on the left side of links
Place the icon on the right side when it's used as an action, like a button, chevron or a link indicator (i.e an arrow). Think of the text as a label that explains the action.
Examples of icons placed on the right side of actions
Sometimes we want to combine these, with an icon to the left and an action to the right. Like this.
Example of icons both left and right of the action
There are of course exceptions, for example:
We still have left to describe when a link is blue and when it's grey. When we wrote this we were not sure yet. Let us know if you can shed some light!