Expo Icon Sets for Material Symbols

Easily integrate Material Symbols icons into your Expo projects with this library. It leverages @expo/vector-icons and provides pre-configured icon sets for seamless usage.

This library converts variable font files from Material Design Icons into static font files by removing the GRAD, opsz, and wght axes. It supports the FILL axis with two values: 0 (outline) and 1 (filled). These font variants are packaged as icon sets using Expo’s createIconSet.

Features

• Predefined Variants: Includes outlined, rounded, sharp, and their filled versions.
• Convenient API: A single component to configure variants, size, fill, and color.
• Optimized for Expo: Fonts are bundled and compatible with the Expo ecosystem.

Installation

Install the library using npm:

npm install material-symbols-expo

Setup

Depending on your project setup, you can load font assets with useFonts or expo-font in your app.config file.

Using useFonts

import { useFonts } from "expo-font";
import { MaterialSymbolsFonts } from "material-symbols-expo";

const [fontsLoaded] = useFonts({
	...MaterialSymbolsFonts,
	...OtherFonts, // Include your other font assets here
});

Using expo-font

Configure font assets in your app.config.mjs:

// app.config.mjs
import { MaterialSymbolsFontPaths } from "material-symbols-expo";

export default {
	expo: {
		plugins: [
			[
				"expo-font",
				{
					fonts: [...MaterialSymbolsFontPaths]
				}
			]
		]
	}
};

Note: Ensure your app.config uses the .mjs extension to support ES Modules. Importing MaterialSymbolsFonts without it will result in an error.

Importing individual variants

You're not required to load all font assets at once. You can import specific variants as needed to reduce bundle size.

Using useFonts

import { useFonts } from "expo-font";
import { MaterialSymbolsOutlinedFontAsset, MaterialSymbolsOutlinedFilledFontAsset } from "material-symbols-expo";

const [fontsLoaded] = useFonts({
	...MaterialSymbolsOutlinedFontAsset,
	...MaterialSymbolsOutlinedFilledFontAsset,
	...OtherFonts // Include your other font assets here
});

Using expo-font

// app.config.mjs
import { MaterialSymbolsOutlinedFontPath, MaterialSymbolsOutlinedFilledFontPath } from "material-symbols-expo";

export default {
	expo: {
		plugins: [
			[
				"expo-font",
				{
					fonts: [
						MaterialSymbolsOutlinedFontPath,
						MaterialSymbolsOutlinedFilledFontPath
					]
				}
			]
		]
	}
};

Usage

1. Simplified Component

Use the MaterialSymbols component to specify variants, size, fill, and color directly:

import { MaterialSymbols } from "material-symbols-expo";

<MaterialSymbols
	name="account_circle" // Required
	variant="rounded"     // Optional: outlined (default), rounded, sharp
	size={24}             // Optional: Default is 24
	color="#000"          // Optional: Default is "currentColor"
	filled={true}         // Optional: Default is false
/>

2. Direct Variant Imports

You can also import specific icon variants directly:

import { MaterialSymbolsOutlined, MaterialSymbolsRoundedFilled } from "material-symbols-expo";

// Outlined variant
<MaterialSymbolsOutlined
	name="account_circle"
	size={24}
	color="#000"
/>

// Rounded + Filled variant
<MaterialSymbolsRoundedFilled
	name="account_circle"
	size={24}
	color="#000"
/>

Variants

This library includes the following icon styles:

• Outlined: MaterialSymbolsOutlined
• Rounded: MaterialSymbolsRounded
• Sharp: MaterialSymbolsSharp
• Filled Variants:
• Outlined + Fill: MaterialSymbolsOutlinedFilled
• Rounded + Fill: MaterialSymbolsRoundedFilled
• Sharp + Fill: MaterialSymbolsSharpFilled

License

This library utilizes Material Symbols under the Apache License 2.0. Ensure compliance with the terms when using the icons.