Reactjs React中选择选项中的材质设计和图标

如何在“选择”下拉列表中添加图标

我的代码是：

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>

    )
  }
}

import React，{Component}来自'React'；
从“@mdi/react”导入图标
从'@mdi/js'导入{mdiformalignleft}；
从'@mdi/js'导入{mdiCheckboxMarked}；
从'react icons/io'导入{iomdradiaobuttonon}；
类AddNewQuestion扩展了组件{
render（）{
返回(
选择题
单选
悬而未决的问题
)
}
}

我得到的不是图标，而是[object]。

我尝试将MD图标作为webfont，如下所述：但我也得到了[object]

有什么办法吗？

和

都是本机UI元素，因此用户的操作系统只能呈现它们<代码>元素只能包含文本字符串，不能包含HTML或React节点

您需要的是类似的东西，它创建自己的DOM元素来模拟使用

的体验，使您能够对其进行样式设置，将图标元素添加到下拉选项中，等等