Ace editor is showing icons twice with autocomplete

Question

So I'm having an issue with Ace editor where certain autocompletions have doubled icons like so

I am creating a custom autocompleter like so:

const customCompleter = {
            identifierRegexps: [/[a-zA-Z_0-9\.\$\-\u00A2-\uFFFF]/],
            getCompletions: (
                editor: Ace.Editor,
                session: Ace.EditSession,
                pos: Ace.Point,
                prefix: string,
                callback: Ace.CompleterCallback
            ): void => {
                var completions: any[] = [];
                completions.push({
                    value: "custom",
                    className: "iconable"
                });
                if (prefix == "custom.") {
                        RList = ["custom.Base64Decode",
                            "custom.AnotherMethod",
                            "custom.Method3",
                            "custom.TestingFunction"
                        ];
                        RList.forEach(function (w) {
                            completions.push({
                                value: w,
                                className: "iconable"
                            });
                        });
                }
                callback(null, completions);
            }
        }

        langTools.addCompleter(customCompleter);

So when I'm pushing to completions i add a className of "iconable". The CSS file then looks like this:

.ace_iconable:after {
    font-family: "Font Awesome 5 Free";
    content: "\f1b2";
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
    font-weight: 900;
}

Not sure why this would be the case, but if anyone has run into this before please let me know! Thanks

Answer 1

Looks like you can actually just change the css a touch.

You can use .ace_iconable:last-child:after and it will stop the icon being duplicated. Looks like multiple spans are used when the autocomplete is picking up on a completion which starts halfway through a word. (E.g. User types "a", autocomplete suggests "bad")

This means that the icon would be displayed twice.