how I use icon in topcoat icon button?

Question

Might be a naive' one - but I am sort of stuck on how to put a icon in topcoat icon button. I am creating a dynamic list with delete and modify buttons (which I want to be icons). Any help is appreciated ...

<button class="topcoat-icon-button">
    <span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>

Answer 1

It is not a naive one, I also came from Bootstrap, was scratching my head, and could not find any useful documentation. First of all, you need to know that the icons are in a different repository: https://github.com/topcoat/icons

The easiest way to go is to use the font. So you need the font directory from that repository. The icomatic.html file and the js folder is the icons showcase, you should not deploy them. The icomatic.js seems to be a fallback mechanism to Unicode symbols, but as far as I understand it works with DOM replacements and thus probably needs some tweaking to work together with AngularJS. You can probably delete it as well, if you do not need the fallback.

Then you need to do the necessary HTML "includes", assuming the icomatic files are available at lib/icomatic:

<link rel="stylesheet" href="lib/icomatic/icomatic.css"/>

Then you can apply all this to your example by using the icomatic class and a glyph, e.g. "alert":

<button class="topcoat-icon-button">
    <span class="topcoat-icon icomatic" style="background-color:#A5A7A7;">alert</span>
</button>

It will still require some styling, but at least you should see an icon.