Including fontawesome brand icons on frontmatter metadata

I'm making some changes to a Gatsby starter and ran into an annoying problem with fontawesome brand icons. The problem is that unlike most icons, that are called faPhone or something like that, the brand icons also need a prefix ,fab.

So I can make them work in the body of my posts, like this: <Icon icon={['fab', 'github']} />

The problem is when I wanna include it on the frontmatter metadata like:

---
category: 'socials'
title: 'Github'
icon: 'fab github'
content: 'janedoegithub'
---

I have tried passing it like the above example, as 2 separate strings, as a list, and nothing seems to work. Does anyone know how to solve this?

Edit: both of these formats also don't work

---
category: 'socials'
title: 'Github'
icon:
  - fab
  - github
content: 'janedoegithub'
---

---
category: 'socials'
title: 'Github'
icon: ['fab', 'github']
content: 'janedoegithub'
---

when I try them I get this error:

GRAPHQL

There was an error in your GraphQL query:

Cannot query field "icon" on type "MdxFrontmatter".

If you don't expect "icon" to exist on the type "MdxFrontmatter" it is most
likely a typo.
However, if you expect "icon" to exist there are a couple of solutions to common
 problems:

- If you added a new data source and/or changed something inside
gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in
GraphiQL and use the GraphiQL explorer to see which fields you can query and
what shape they have
- You want to optionally use your field "icon" and right now it is not used
anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL
schema. A quick fix is to add at least one entry with that field ("dummy
content")

It is recommended to explicitly type your GraphQL schema if you want to use
optional fields. This way you don't have to add the mentioned "dummy content".
Visit our docs to learn how you can define the schema for "MdxFrontmatter":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src/components/ContactInfo/index.js:25:15

    

this is the index.js mentioned in the error:

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

import InfoBlock from 'components/ui/InfoBlock';
import Container from 'components/ui/Container';
import TitleSection from 'components/ui/TitleSection';

import * as Styled from './styles';

const ConctactInfo = () => {
  const { mdx, allMdx } = useStaticQuery(graphql`
    query {
      mdx(frontmatter: { category: { eq: "socials section" } }) {
        frontmatter {
          title
          subtitle
        }
      }
      allMdx(filter: { frontmatter: { category: { eq: "socials" } } }, sort: { fields: fileAbsolutePath }) {
        edges {
          node {
            id
            frontmatter {
              title
              icon
              content
            }
          }
        }
      }
    }
  `);

  const sectionTitle = mdx.frontmatter;
  const socials = allMdx.edges;

  return (
    <Container section>
      <TitleSection title={sectionTitle.title} subtitle={sectionTitle.subtitle} center />
      {socials.map((item) => {
        const {
          id,
          frontmatter: { title, icon, content }
        } = item.node;

        return (
          <Styled.ContactInfoItem key={id}>
            <InfoBlock icon={icon} title={title} content={content} center />
          </Styled.ContactInfoItem>
        );
      })}
    </Container>
  );
};

export default ConctactInfo;