Search code examples
javascriptace-editor

Can we use an icon in ACE editor's autocomplete

I know that I can add an autocomplete list in ACE editor as below

completions.push({ name:"testing1", value:"testing1", meta: "code1" });
completions.push({ name:"testing2", value:"testing2", meta: "code2" });

My requirement is to add an icon adjacent to "code1" in the autocomplete popup. I tried to use <img> in meta value but it didn't work. I saw the ace's source code but didn't see a way to implement it.

Has anyone done this before?

Update: I did it myself and added details in the answer below

Solution

  • I found a way to do it through css.

    Added className property to the completion object

    completions.push({ name:"test", value:"test", meta: "test", className:"iconable"});

    And added icon in css:

    .ace_iconable:after
{
    content: " \f14c"; /* in my case it is font-awesome icon*/
    font-family: FontAwesome;
}