Extend placeholders instead of classes

Extend placeholders instead of classes for icons.

To avoid selector creep like this mess I created without knowing it:
```
.related .item--video .item__title--has-icon-mobile .i, .related .item--video .item__title--has-icon-mobile .caption:before, .related .item--video .item__title--has-icon-mobile figcaption:before, .related .item--video .item__title--has-icon-mobile .from-content-api blockquote.quoted:before, .from-content-api .related .item--video .item__title--has-icon-mobile blockquote.quoted:before, .related .item--gallery .item__title--has-icon-mobile .i, .related .item--gallery .item__title--has-icon-mobile .caption:before, .related .item--gallery .item__title--has-icon-mobile figcaption:before, .related .item--gallery .item__title--has-icon-mobile .from-content-api blockquote.quoted:before, .from-content-api .related .item--gallery .item__title--has-icon-mobile blockquote.quoted:before
```

![ ](http://media.giphy.com/media/3qaUhLknPw6NW/giphy.gif)