Material Design and Ionicons in select option in React

Question

How can I add icons in select dropdown?

My code is:

import React, { Component } from 'react';

import Icon from '@mdi/react'
import { mdiFormatAlignLeft } from '@mdi/js';
import { mdiCheckboxMarked } from '@mdi/js';
import { IoMdRadioButtonOn } from 'react-icons/io';

class AddNewQuestion extends Component {

  render() {
    return (
        <div>
          <select>
            <option value='multiple'><Icon path={mdiCheckboxMarked} /> Multiple choice</option>
            <option value='single'><IoMdRadioButtonOn /> Single choice</option>
            <option value='open'><Icon path={mdiFormatAlignLeft} /> Open question</option>
          </select>
        </div>

    )
  }
}

Instead of the icon, I get [object Object].

I tried to put MD icon as a webfont, as described here: https://dev.materialdesignicons.com/getting-started/webfont but I also get [object Object].

Any ideas how to do it?

score 1 · Accepted Answer · answered May 26 '20 at 18:31

<select> and <option> are native UI elements, so you're constrained to how the users's operating system renders them. <option> elements can only contain text strings, not HTML or React nodes.

What you're looking for is something like the Material UI Select Component, which creates its own DOM elements to simluate the experience of using a <select>, giving you the ability to style it, add icon elements to dropdown options, etc.

Material Design and Ionicons in select option in React

1 Answers1