Google Icons from Google Fonts with Nextjs
Tags: webdev, javascript, tutorial, nextjs
Published: 2023-11-07 11:58:19

Google has just launched it's [material icons](https://fonts.google.com/icons) out of the box for all platforms. Previously the specification of `Google Material Icons` were developed by `MUI/Vuetify` and some other `Google Material` Based UI libraries for different frameworks. But, now Google itself developed its icon and make it open to all platforms to adopt. So, will it replace `fontawesome`?🤨 who knows! but it's a great time to get rid of `premium/pro icons` based businesses.

So, as of now there is no direct documentation how to use the Google Icons using frameworks like Nextjs. So, to use it using `Next.js 14` and `app/` directory we can create a global css file and can give it a relevant name, let's say `globalicons.css`(path is `app/globalicons.css`) and `import` it from global `app/layout.tsx` or `app/layout.jsx` 

`app/layout.tsx`
```tsx
import type { Metadata } from 'next';
import { Lexend } from 'next/font/google';
import './globals.css';
import './globalicon.css'; // 👈🏻

export const metadata: Metadata = {
  title: 'Website title',
  description: 'Website description',
};

const lexend = Lexend({ subsets: ['latin'] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
        <body className={lexend.className}>{children}</body>
    </html>
  );
```

At first copy the icons url from the [Google Fonts website](https://fonts.google.com/icons). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65t2ad6e941n42osisfe.png)

And, paste the copied url to `@import url(paste url)`

`app/globalicons.css`
```css
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mg35qwkguckz3g3iwoh.png)

Now, copy the style part of the icon, you can modify if you want like color, weight. Paste it to `globalicons.css`

`app/globalicons.css`
```css
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
```

Now, from any component we can use `<span className="material-symbols-outlined">arrow_back</span>` for `arrow_back` icon, and for different `icons` we would just need to change the name of the `icon` from [Google Fonts Icons](https://fonts.google.com/icons).  Moreover, we can use any [Google Fonts Icons](https://fonts.google.com/icons) to any of our `components` without extra setup.

So, this can be a minimal setup. Though it is not an ideal or official solution but a viable one. For more further and advance use case of `Google Fonts Icons` follow the recommended official docs for [Material Symbols guide](https://developers.google.com/fonts/docs/material_symbols) 

Follow me on [X@sabbirsobhani](https://twitter.com/sabbirsobhani)
Follow me on [GitHub@iamsabbirsobhani](https://github.com/iamsabbirsobhani)