How can I use Google icons in my NextJS project?
Answered
Common paper wasp posted this in #help-forum
Common paper waspOP
I did it like this, but it didn't work
- My layout.tsx
- My element
- My layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html lang="en">
<Head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</Head>
<body className={inter.className}>{children}</body>
</html>
);
}- My element
<span className="material-symbols-outlined">star</span>Answered by Ray
import it in
globals.css@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");2 Replies
@Common paper wasp I did it like this, but it didn't work
- My layout.tsx
tsx
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html lang="en">
<Head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</Head>
<body className={inter.className}>{children}</body>
</html>
);
}
- My element
tsx
<span className="material-symbols-outlined">star</span>
import it in
globals.css@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");Answer
Common paper waspOP
Thanks