Если вы используете Gatsby и хотите использовать значки материалов, есть несколько вариантов. Вот что вы можете сделать, если хотите использовать их в качестве шрифта.
Начните с добавления плагина Gatsby для шрифтов Google в свой проект с помощью yarn или npm.
yarn add gatsby-plugin-google-fonts
Затем отредактируйте ваш gatsby-config.js, включив в него новый плагин. Возможно, у вас уже есть другие плагины, просто добавьте их в конец массива плагинов. В приведенном ниже примере мы добавили его сразу после плагина шлема. Вы заметите, что сюда можно добавить и другие шрифты Google. Я добавил Roboto с несколькими шрифтами разной толщины.
Теперь вы можете добавлять значки материалов в любом месте, просто набрав имя значка внутри элемента и добавив семейство шрифтов Значки материалов к этому классу элементов. Обратите внимание, что _ важен, поскольку он используется для пробелов (например, check_circle).
Класс CSS может быть таким простым.
Это надуманный пример, так как вам понадобится еще несколько свойств элемента, чтобы сделать его полезным и доступным. Кроме того, вы можете просто создать свой собственный компонент значка и передать имя, размер и другие свойства значка в качестве свойств.
