Hello everyone, I want to write a toggle button for light and darkmode. I tried to implement material symbols from google for getting a sun and a moon. React-icons have a background, so they are not to center very well. I done now the following: In my src directory I created a pages folder and in there a _ document.tsx with the following code:
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
const MyDocument = () => {
return (
<Html>
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=optional"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
export default MyDocument
In my DarkMode file I have this code:
import React from 'react'
import styles from './darkmode.module.css'
const Darkmode = () => {
return (
<div className={styles.container}>
<div className={styles.icon}><i className="material-icons-outlined" style={{ color: 'blue', fontSize: '14px', margin: '4px' }}>
mode_night
</i></div>
<div className={styles.icon}><i className="material-icons-outlined" style={{ color: 'blue', fontSize: '14px', margin: '4px' }}>
light_mode
</i></div>
<div className={styles.circle}></div>
</div>
)
}
export default Darkmode
But there is only the text displayed (e.g. “light_mode”). No icons.
Does someone have experience with this?
Thanks for your help.
Best Roman