Icons

You can use whatever icon/icon system you like. We just made available what we use in Mergado app itself.

We use approach called SVG sprite. Basically take a bunch of SVG icons, put them into one SVG file as symbols and then use SVG use tag with xlink:href attribute set as file.svg#<symbol id>. In code it looks like this:

<svg class="icon">
    <use xlink:href="<svg sprite url>#<symbol id>"></use>
</svg>

<!-- Example - big "service-mergado" icon: -->
<svg class="icon big">
    <use xlink:href="icons.svg#service-mergado"></use>
</svg>

Our CSS is targeted at .icon, so you can use for example PNG image in ordinary img tag and you should be good to go.

If you need to icon hyperlink, just standard icon code with anchor element with icon class, like so:

<a href="#" class="icon">
    <svg class="icon">
        <use xlink:href="icons.svg#service-mergado"></use>
    </svg>
</a>

Same goes for adding title, just use span or i with your title set to it.

Icons will have some space around them by default, unless they’re first/last child. Because HTML text nodes don’t count as children when using CSS’s :first-child, :last-child and :only-child, you’ll have to wrap text next to icon in some element, plain span is good enough.

Colors

As long as the icon doesn’t have it’s color (fill attribute) set in SVG file itself, you can control its color via CSS:

svg.icon {
    fill: red;
}

That’s why our icons are as simple as possible (code-wise), mostly just paths. So we can use only one attribute (fill) to control its color and we don’t have to bother any other property, like border colors or something like that.