Как добавить кнопки со значками с RMW C, используя пути SVG из MDI в React?

Question

Привет, я пытаюсь создать кнопку со значком, которая работает со значками материального дизайна из Google, но в них отсутствуют значки социальных сетей. В библиотеке значков материального дизайна есть эти значки, но я надеялся, что не придется загружать их локально. Остальная часть моего дизайна была выполнена с использованием веб-компонентов реагирующих материалов, поэтому я надеялся использовать их функции для добавления кнопок значков.

Поскольку он расширяет значки, которые могут принимать пути SVG в качестве компонента, я надеялся сделайте следующее:

import {Button} from '@rmwc/button';
import {IconButton} from '@rmwc/icon-button';
import {Icon} from "@rmwc/icon";
import '@rmwc/button/styles';
import '@rmwc/icon-button/styles';
import '@rmwc/icon';
import {mdiTwitter} from "@mdi/js";

export default function Test () {
    const twitterIcon = (<Icon
        icon={{
            strategy: 'component',
            icon: (
                <svg
                    style={{ width: '24px', height: '24px' }}
                    viewBox="0 0 24 24"
                >
                    <path
                        fill="#4285F4"
                        d={mdiTwitter}
                    />
                </svg>
            )
        }}
    />);
  return (
            <IconButton icon="star" label="Rate this!" />

            <IconButton icon="favorite" label="Favorite" disabled />

            <IconButton icon={twitterIcon} label="Favorite" disabled />

  );
}

или сделайте это следующим образом:

import {Button} from '@rmwc/button';
import {IconButton} from '@rmwc/icon-button';
import {Icon} from "@rmwc/icon";
import '@rmwc/button/styles';
import '@rmwc/icon-button/styles';
import '@rmwc/icon';
import {mdiTwitter} from "@mdi/js";

export default function Test () {
    const twitterIcon = (<Icon
        icon={{
            strategy: 'component',
            icon: (
                <svg
                    style={{ width: '24px', height: '24px' }}
                    viewBox="0 0 24 24"
                >
                    <path
                        fill="#4285F4"
                        d={mdiTwitter}
                    />
                </svg>
            )
        }}
    />);
  return (
            <IconButton icon="star" label="Rate this!" />

            <IconButton icon="favorite" label="Favorite" disabled />

            <IconButton icon={{
            strategy: 'component',
            icon: (
                <svg
                    style={{ width: '24px', height: '24px' }}
                    viewBox="0 0 24 24"
                >
                    <path
                        fill="#4285F4"
                        d={mdiTwitter}
                    />
                </svg>
            )
        }}
        label="Favorite" disabled />

  );
}

Однако в обоих случаях просто создайте значок как окно просмотра SVG, но не как кнопку: изображение дисплея Изображение сгенерированных элементов

Энди, безусловно, был бы признателен за лучший способ сделать это. Спасибо!