How to put a fontawesome icon <i> into a select option and stylize it?

Question

I am trying to put an icon into a select option and I am getting this error:

Warning: validateDOMNesting(...): cannot appear as a child of <option>

I am putting asterisk icons into all my inputs to say that they are required just like this:

<label htmlFor="floatingInput31">
    {cli_nome !== '' ? null
    :<i className="fa-solid fa-asterisk fa-2xs" style={{color: "#e41607"}} id="icon-asterisco-obrigatorio"></i>
    }
    E-mail
</label>

Then I tried to put it in a select and got the error that I mentioned:

<select className="select-cidades" nome='cidades' id='cidade' value={end_cid_id} onChange={salvarCidade}>
    {end_cid_id === '' ? <option value='0000000'><i className="fa-solid fa-asterisk"> </i> Escolha a cidade</option> 
    :
    <option value="0000000">Escolha a cidade</option>
    }
    <option value="0000000">Escolha a cidade</option>
    {
        cidades.map((city) => {
            return <option key={city.cid_id} value={city.cid_id}>{city.cid_nome} - {city.cid_uf_sigla}</option>
        })
    }
</select>

I have already tried to put the icon code like <option value='0000000'>&#xf069; Escolha a cidade</option>, but this way I am not allowed to stylize it.

Does anyone know what to do?

Answer 1

I found a way to put the asterisk (that means required) by changing the select to a bootstrap dropdown.

Here is the new syntaxe:

<div className='col-lg-8'>
                    <div className="dropdown mt-2" id="dropdown-cidades-area">
                        {cepFilled === true ? <button className="btn btn-secondary" type="button" id="dropdown-menu-cidades" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value={end_cid_id}>
                            {end_cid_nome}
                        </button>
                        : 
                        <>
                            {end_cid_id === ''? <button className="btn btn-secondary " type="button" id="dropdown-menu-cidades" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value={end_cid_id}>
                                <i className="fa fa-solid fa-asterisk fa-2xs my-auto" style={{color: "#e41607"}} id="asterisk-cidades"></i> 
                                Escolha a cidade
                            </button>
                            :
                            <button className="btn btn-secondary " type="button" id="dropdown-menu-cidades" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value={end_cid_id}>
                                {end_cid_nome}
                            </button>
                            }
                            
                        </>
                        }
                        
                        <div className="dropdown-menu" aria-labelledby="dropdown-menu-button">
                            {
                                cepFilled ?
                                cidades.map((city) => (
                                    // <a key={city.cid_id} className="dropdown-item" href="#" onClick={() => salvarCidade(city.cid_id)}>
                                    //     {city.cid_nome} - {city.cid_uf_sigla}
                                    // </a>
                                    <a key={city.cid_id} className="dropdown-item" href="#" onClick={() => salvarCidade(city.cid_id)}>
                                        {city.cid_nome} - {city.cid_uf_sigla}
                                    </a>

                                )) :
                                <>
                                    <a className="dropdown-item" onClick={() => salvarCidade} value={end_cid_id}> Escolha a cidade</a>
                                    {
                                        cidades.map((city) => (
                                            <a key={city.cid_id} className="dropdown-item" onClick={() => salvarCidade(city.cid_id)}>
                                                {city.cid_nome} - {city.cid_uf_sigla}
                                            </a>
                                        ))
                                    }
                                </>
                            }
                        </div>
                    </div>
                </div>