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"></i> {/* works */}
<i className="demo-icon">''</i> {/* works */}
<i className="demo-icon">""</i> {/* works */}
<i className="demo-icon">{toto}</i> {/* does not work, shows "" */}
<i className="demo-icon">{tata}</i> {/* does not works, shows "2049" */}
</>
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 }} />