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

Ionic Framework ionic-v3
1

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
2

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.

3

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.

4

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

5

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