Integrate Google Material Symbols effortlessly into your Mojo CSS projects.
- Install the capsule package via npm:
npm install @mojocss/material-symbols- Import the
capsuleExamplefunction from the installed package:
import materialSymbols from "@mojocss/material-symbols";- Add the capsule to your Mojo config:
mojo({
// Mojo CSS Config
capsules: [materialSymbols],
});Alternatively, you can configure specific options:
mojo({
// Mojo CSS Config
capsules: [
{
capsule: materialSymbols,
options: {
type: ["Outlined","Rounded","Sharp"], // Array of icon styles | Default ["Outlined"]
fill: "both", // true, false, "both" | Default "both"
weight: 400, // 100...700 | Default 400
grade: 0, // -25...200 | Default 0
size: 24, // 20...48 | Default 48
},
},
],
});<script src="https://unpkg.com/@mojocss/material-symbols"></script>and then
mojo({
// Mojo CSS Config
capsules: [materialSymbols],
});For outlined use:
<span class="material-symbols-outlined">
home
</span>For rounded use:
<span class="material-symbols-rounded">
home
</span>For sharp use:
<span class="material-symbols-sharp">
home
</span>When the fill option is set to "both", you can use the symbols-filled class to fill the icon:
<span class="material-symbols-outlined symbols-filled">
home
</span>