How can I put github's stars in Navbar using Docusaurus v2

Question

I want to put an icon, please someone who can do it explain in which file I can do it and how?

themeConfig: {
    navbar: {
      title: 'graphql-go/graphql',
      logo: {
        alt: 'My Site Logo',
        src: 'img/GraphQL_Logo.png',
      },      
      items: [
        {
          href: '/docs/tutorial-basics/overview',
          label: 'Docs',
          position: 'left',
        },
        // {to: '/blog', label: 'Blog', position: 'left'},
        {
          href: 'https://github.com/graphql-go/graphql',
          label: 'GitHub',
          position: 'right',
        },
      ],                   
    },    

Answer 1

You want to add an icon before text in the top Navbar? Easiest way is to create a css class with a::before and::after options. Add an icon in that css, like using FontAwesome, Material, or svg. Then call that css in your docusaurus.config.js file.

For example:

themeConfig: {
    navbar: {
      title: 'graphql-go/graphql',
      logo: {
        alt: 'My Site Logo',
        src: 'img/GraphQL_Logo.png',
      },      
      items: [
        {
          href: '/docs/tutorial-basics/overview',
          label: 'Docs',
          position: 'left',
          className: 'navbar-icon-menu',
        },
        // {to: '/blog', label: 'Blog', position: 'left'},
        {
          href: 'https://github.com/graphql-go/graphql',
          label: 'GitHub',
          position: 'right',
        },
      ],                   
    },   

With the css for navbar-icon-menu having options based on hover, before, after to best match what you want to display. Just an example, we used the following for a community icon. We used this in place of a label, but you can tweak and do the same to show the icon and label together. Much like the drop-down css for showing the down arrow after label.

.navbar-community-menu:after {
  transition: opacity 0.2s;
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24px' height='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 12px;
}

.navbar-community-menu:hover:after {
  opacity: 0.5;
}

.navbar-community-menu:after, .navbar-community-link:after {
  border-style: none !important;
  margin-left: -5px !important;
}

Hope that gives some ideas!