如何使用现有的材质 ui 图标构建自定义图标？

Question

我想创建一个箭头，如下图所示

我使用 svg 得到它 -

<svg height='24' width='12' style={{ marginBottom: '-4px', marginLeft: '49%' }}>
  <line x1='6' y1='0' x2='6' y2='28' style={{ stroke: '#D0D0D7', strokeWidth: 2 }} />
  <polyline points='0,14 6,8 12,14' style={{ fill: 'none', stroke: '#D0D0D7', strokeWidth: 2 }} />
</svg>

但我想使用材质 ui 图标，并且没有材质 ui 图标，向上箭头位于该行的中间。

Material ui中提供了以下内容

1. - 没有线的箭头
2. - 行首的箭头

有没有办法使用选项 1 中的KeyboardArrowUp图标并将其放在一行的中间？ 或任何其他方式来实现我想要的？

Answer 1

我想在文档中很清楚.. https://material-ui.com/components/icons/但无论哪种方式，您都可以使用 SvgIcon 或普通图标

function HomeIcon(props) => (<SvgIcon {...props}><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></SvgIcon>); 或使用

<Icon color="primary">add_circle</Icon>