Ace editor is showing icons twice with autocomplete - reactjs

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.