Is it legit to just inject SVG into an ion-icon element?

Short story: I have some iconography needs that aren’t all fulfilled by the ionicons library. I had been dealing with them by sticking them in img tags or elsewhere, but I decided to try and see what would happen if I made an ion-icon element without a name attribute. It seems to work (in particular, the icon displays at a reasonable size and behaves like an ion-icon in its parent components without me needing to reproduce the css stuff that attaches to ion-icon on my own). This doesn’t seem like documented behavior though, so I thought I’d ask if I’m Playing With Fire here:

  <ion-list item-left>
    <ion-item>
      <ion-icon item-left [inlineSVG]="'/assets/trellisIcons.min.svg#svg-icon-chat'"></ion-icon>
      <p>{{community.relationships.conversations.length}}</p>
    </ion-item>
    <ion-item>
      <ion-icon item-left [inlineSVG]="'/assets/trellisIcons.min.svg#svg-icon-torsos-all'"></ion-icon>
      <p>{{community.relationships.members.length}}</p>
    </ion-item>
  </ion-list>

This ends up working fine - I have an icons SVG file that’s got a lot of symbols in it, which I can easily recycle from my vanilla angular 1 version of the app (which I’d injected into index.html as a gulp task back then)

I’m using the excellent ng-inline-svg library to handle actually dealing with getting the svgs in place (there’s a lot of uneven behavior across browsers when trying to do a plain old use tag, I’ve found, so having this take care of things is just simpler.)

So the question is: do people do this? Is it legit? Not sure. FWIW, if the ionicons service allowed me to register new icons, I could do it that way instead, but I couldn’t find any documentation about that.

1 Like

Perhaps you could try forking the ionicons project and adding SVG files to it. Then you could use npm link to have your project use your local homebrew ionicons package.

Yeah, that works in dev, but npm link isn’t a good solution for production - I want to shrinkwrap everything. Similarly, I could fork the project and just then point my npm dependencies to my fork instead of the ionic-team one, but then I have to manually keep my own project up to date (and that eats a private npm repo, since the whole point here is that this iconography isn’t mine to share freely). Manually injecting the svg seems to work, I guess the “what if it breaks in a future version” concern has the same degree of brittleness as if I’d forked and extended the ionicons project and kept my version up to date with the upstream.

I suppose I would concur with this analysis, for whatever that’s worth.

Thanks for mentioning ng-inline-svg. Wish I had known about this a while back!