Using an icon font displays unexpected results about dropkick

[benlevydesign]

@Robdel12 or @wwilsman: Any ideas?

Thanks so much!

[Robdel12]

Hey @benlevywebdesign! Sorry for the delayed response. I've been in the middle of a move for a week (just got internet back today! :p). I hope to be able to get to this over the weekend though!

[benlevydesign]

No worries, It's probably something so simple I'm missing. I'm not sure though...

[benlevydesign]

I'm going to try something. It probably won't work, but I'm going to try hosting the icon font myself and see what happens...

[Robdel12]

I was thinking about this and I wonder if it's because icon fonts can't be rendered in a normal select. I'm sure there's something in DK we can do to fix that, but I think that's the issue here.

[wwilsman]

I'm betting it has something to do with the innerHTML property. That property parses the html. I think what we'll want is textContent.

There's a few places we reference innerHTML we'll need to replace if this is the case

[benlevydesign]

Should I try replacing innerHTML with textContent? I would do this in the JS file?

[Robdel12]

Just to give an update: in-between unpackings I've tried to reproduce / fix the issue but I haven't been able to even get the icon to render. Curious if this is something older DK can do and not the latest release. (I see you're using 2.1.7)

I tried going brute force and replacing innerHTML with textContent but that breaks DK, haha. I'm going to need to carve out some time for this one.

[benlevydesign]

Any enlightening discoveries?

[Robdel12]

Hey @benlevywebdesign I haven't had time to really dig into this but I do know this will be a tough one to solve. Mainly because icons aren't supported in regular <selects>, which is what DropKick uses to build itself. We'll have to make sure we handle the cases for scrubbing out the icon from the value attribute too.

This should be a feature that we add for sure though.

[benlevydesign]

Hmm, yeah thats true with regular selects too I supposes. I thought I'd have to insert <i class="material-icons">&#xEB47;</i> into my databse to echo it back on the page but I think the easiest thing to do would be for me to use just text in the select and echo out the result as the icon with some if else statements. I'm not so concerned with having the icon display as the selects element. If you want to mark this issue closed you can.

[Robdel12]

I think this is something DropKick should do though. This is a pretty common reason why someone would use a select replacement over a normal select.

Thanks for raising the issue :D