Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Default icon with SVG icon system possible?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #245729
    alexclemens
    Participant

    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.

    1. 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.

    1. 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.

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.