Using an icon font displays unexpected results

[benlevydesign]

Version of Dropkick:

2.1.7

Expected Behavior

DropKick should work as expected and display the selected option that I'm pulling from my mysql database with <?php echo $vendcat ?> which would have <i class="material-icons">&#xEB47;</i> as one of the results and would output it like:

I've used DropKick before with just text only options and pulling them with my php/mysql databases. As expected, anywhere else I use the <?php echo $vendcat ?> php code to display the mysql result, I get what I want: or one of the 2 other choices from the icon font I'm using. You can see it working here (look on the right side after each vendors name).

Actual Behavior

I'm using DropKick and getting the selected option from my mysql database and it works as expected but I'm using an icon font and when using the icons in the select options I just get a small black outlined box like this: 

Here is my test webpage

Here is my DropKick test with select options that use an icon font icon as part of the option text
Look for the "vendor type" DropKick (the form element after "vendor name")

Any help or ideas would be greatly appreciated. I would love to use the select element with DropKick for this form element.

[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