Installation

To use Solid X in your project, run one of the following commands in your terminal:

Peer Dependencies

Please note that solid-js is a peer dependency:


json
"peerDependencies": {
  "solid-js": "^1.7.0"
}


json
"peerDependencies": {
  "solid-js": "^1.7.0"
}

Typography

Material You is designed to use Roboto by default. You may add it to your project using Fontsource, or using the Google Web Fonts CDN.

Fontsource

You may add it to your project via Fontsource by running one of the commads below:

Then you can import it in your entry point like:


js
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';


js
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

💡

Fontsource can be configured to load specific subsets, weights and styles. Material UI's default typography configuration relies only on the 300, 400, 500, and 700 font weights.

Google Web Fonts

To install the Roboto font using the Google Web Fonts CDN, simply add the following snippet to your project's <head></head> tag:


html
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />


html
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Icons

Google Web Fonts

To install the Material Icons font using the Google Web Fonts CDN, simply add the following snippet to your project's <head></head> tag:


html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />


html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Then you can use the Icons like:


html
<span class="material-icons-outlined"> account_circle </span>


html
<span class="material-icons-outlined"> account_circle </span>