Search code examples
reactjsfontshexfontello

display fontello character from variable

I have created a font from fontello that works. I am trying to display a character in a react component, based on a string passed as a parameter.

The same string or number that works when declared directly is no longer understood when passed as a variable.

    let toto = ""
    let tata = 2049 ; // 2049 decimal = 801 hex
    return   <>
        <i className="demo-icon">&#xe801;</i>  {/* works */}
        <i className="demo-icon">'&#xe801;'</i> {/* works */}
        <i className="demo-icon">"&#xe801;"</i> {/* works */}
        <i className="demo-icon">{toto}</i>     {/* does not work, shows  "&#xe801;" */}
        <i className="demo-icon">{tata}</i>     {/* does not works, shows  "2049" */}
    </>
Solution

  • The problem you are experiencing stems from React's handling of variables and special characters. When you enter a string directly, React interprets it as HTML and correctly renders the character. However, when you give a variable, React considers it as a regular string and ignores the special characters.you can use the dangerouslySetInnerHTML property to tell React to interpret the string as HTML.

     <i className="demo-icon" dangerouslySetInnerHTML={{ __html: toto }} />