Solid Material Symbols

Using Google Material Symbols as Solid.js components.

🚧 Incomplete

This package is currently under adjustment.

📦 Installation

npm install solid-material-symbols

🎨 Usage

import { MsSettingsSuggestFill } from "solid-material-symbols/outlined/400";

<MsSettingsSuggestFill size={40} class="mx-auto" color="#0099ff" />

You can search for icon names on the icons page of Google Fonts.

• https://fonts.google.com/icons

⚙️ Configuration

The import path is:

• type: outlined, rounded, sharp
• weight: 200, 400, 600

import {...} from "solid-material-symbols/{type}/{weight}"

Components is accepts SVGElement props and additional options.

See types below.

type IconProps = {
  color?: string; // default: "currentColor"
  size?: string | number; // default: "1em"
  title?: string; // default: undefined
} & JSX.SvgSVGAttributes<SVGSVGElement>

💙 Acknowledgments

This package was made with reference to "solid-icons".

thank you.

📜 License

Source code: MIT

• Please use icons according to the license(Apach License 2.0) of "google/material-design-icons" & "marella/material-symbols".