I implemented external svg icon system as suggested by css-tricks in my project which used css icons previously.
Please help me to bounce around ideas about how to implement “default icon” with this approach.
- CSS
In my angular project with css icons it worked like this:
<span class="icon icon-log-default icon-log-{{ categoryToCssClass( record.category ) }}"
We have a big team, programmers always add new categories and I don’t always have a new icon available instantly for each new category, so we need a “default” category icon. When categoryToCssClass returns something new (not defined in css) .icon-default kicks in and the default icon shows.
- SVG
The closest I could get with svg icon system was:
<svg class="icon">
<use xlink:href="" ng-href="/images/assets.svg#icon-log-{{ categoryToCssClass(record.category) }}">
</use>
<use xlink:href="/images/assets.svg#icon-log-default" />
</svg>
This shows both icons when categoryToCssClass returns existing symbol.