The idea behind was to have decorators on top of an icon. The idea is taken from eclipse, where it has a "background" icon and then a decorator for each edge (top left, top right, bottom left, bottom right). To stack up icons, such as user in the background and a plus as bottom right decorator.
Luckily this is possible with FA5, see here: https://jsfiddle.net/8oqL3b5p/276/
Taken this and combine it with ember, I was able to create this API:
Which works fine. So the eclipse API offers the ability to put a decorator into each edge. While my API would allow this, the following doesn't work (yet?):
I wasn't able to achieve this in my early experiments and due to my limited understanding of SVG, though should be possible. Since it is working with masks, I think FA5 didn't intended to use multiple masks onto an icon?
In general I think, this is possible:
While mask
just cuts of the piece of the provided icon in the background icon, a decorator
puts itself the same item onto the cut out area.
FWIW, Animation: