Как создать собственный значок, используя существующие значки пользовательского интерфейса материалов?

Question

Я хочу создать стрелку, как показано на изображении ниже

I got it using 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 доступны следующие элементы:

1. - arrow without a line
2. стрелка вверху строки - стрелка вверху строки

Есть ли способ использовать значок KeyboardArrowUp из варианта 1 и поместить его в середину строки? или любым другим способом достичь желаемого?

Answer 1

я думаю, это ясно в do c .. 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>