如何使用现有的材质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向上的箭头位于该行中间的材质ui图标。

材料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>