{"_id":"@expo/material-symbols","_rev":"6-132c521599965657a08760d1c575b46c","name":"@expo/material-symbols","dist-tags":{"latest":"0.1.1"},"versions":{"0.0.1":{"name":"@expo/material-symbols","version":"0.0.1","_id":"@expo/material-symbols@0.0.1","maintainers":[{"name":"ide","email":"ide+npm@jameside.com"},{"name":"brentvatne","email":"brentvatne@gmail.com"},{"name":"evanbacon","email":"baconbrix@gmail.com"},{"name":"expoadmin","email":"support@expo.io"},{"name":"exponent","email":"exponent.team@gmail.com"},{"name":"bycedric","email":"me@bycedric.com"},{"name":"kudochien","email":"ckchien@gmail.com"},{"name":"alanhughes","email":"hughesno1@gmail.com"},{"name":"tsapeta","email":"npm@tsapeta.com"},{"name":"expo-bot","email":"brent+expobotnpm@expo.io"},{"name":"philpl","email":"phil@kitten.sh"},{"name":"wschurman","email":"wschurman@gmail.com"}],"bin":{"add-icon":"bin/add-icon.mjs"},"dist":{"shasum":"04a9dfb386624edf456cd5ec3be848446c6de3cb","tarball":"https://registry.npmjs.org/@expo/material-symbols/-/material-symbols-0.0.1.tgz","fileCount":13655,"integrity":"sha512-2qSTkWv7sMMpqyX9gJtE8FgOBFu8MEvuKZRhw7qUyHOOThOuvYbKJouZdUNxvDUQtvbSLBcJ/Ll6I6hdOjBttg==","signatures":[{"sig":"MEUCIQCpMhmU4hq0ClKQf3wldMTmD/jLQHXQ7TvZanAp8sVA9wIgYD3ptzpGvxzH2Gld2ERti9NgMVvu7Zvz2QOzLSVzac8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6405662},"exports":{"./*.xml":{"types":"./icons/*.xml.d.ts","default":"./icons/*.xml"}},"gitHead":"e053aa34fb735d004211beac0eb53b249c07f940","scripts":{"test":"bun test","prepare":"bun run build-cli","add-icon":"bun run add-icon.ts","generate":"bun run generate.ts","build-cli":"bun build add-icon.ts --target node --format esm --outfile bin/add-icon.mjs","typecheck":"tsc","update-icons":"bun run update-icons.ts","prepublishOnly":"bun run generate.ts"},"_npmUser":{"name":"kudochien","email":"ckchien@gmail.com"},"_npmVersion":"11.12.1","directories":{},"sideEffects":false,"_nodeVersion":"24.15.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest"},"peerDependencies":{"typescript":"^5"},"_npmOperationalInternal":{"tmp":"tmp/material-symbols_0.0.1_1777318591416_0.2908172962547164","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@expo/material-symbols","version":"0.1.0","keywords":["android","expo","expo-ui","icons","jetpack-compose","material-design","material-symbols","react-native","vector-drawable"],"author":{"name":"650 Industries, Inc."},"license":"MIT","_id":"@expo/material-symbols@0.1.0","maintainers":[{"name":"ide","email":"ide+npm@jameside.com"},{"name":"brentvatne","email":"brentvatne@gmail.com"},{"name":"evanbacon","email":"baconbrix@gmail.com"},{"name":"expoadmin","email":"support@expo.io"},{"name":"exponent","email":"exponent.team@gmail.com"},{"name":"bycedric","email":"me@bycedric.com"},{"name":"kudochien","email":"ckchien@gmail.com"},{"name":"alanhughes","email":"hughesno1@gmail.com"},{"name":"tsapeta","email":"npm@tsapeta.com"},{"name":"expo-bot","email":"brent+expobotnpm@expo.io"},{"name":"philpl","email":"phil@kitten.sh"},{"name":"wschurman","email":"wschurman@gmail.com"}],"homepage":"https://github.com/expo/material-symbols#readme","bugs":{"url":"https://github.com/expo/material-symbols/issues"},"bin":{"add-icon":"bin/add-icon.mjs"},"dist":{"shasum":"deb1c2a7fa138b49aaa22519b3ddeefc787b78ad","tarball":"https://registry.npmjs.org/@expo/material-symbols/-/material-symbols-0.1.0.tgz","fileCount":7702,"integrity":"sha512-OtsnS6qBRAvZ8svJAgPkH4Xlp3DGt9gyvdE+5dAk7qkwmN173JfZ3MnFtuiSO5oxbrDDpwfOJAHcQRf9PnO0Jg==","signatures":[{"sig":"MEYCIQDF9A2eD02j8UKYwKm1Hf4VyV6+7nA+Y5ykvj1sdTGMQgIhAPB8bGDzkrDt9IvHKPn1COi5OWUDCn8E2c4oo977JiBL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@expo%2fmaterial-symbols@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":4285773},"exports":{"./*.xml":{"types":"./icons/*.xml.d.ts","default":"./icons/*.xml"}},"gitHead":"c996846f2109ba74df1a96f091e64826474367e0","scripts":{"test":"bun test","prepare":"bun run build-cli","add-icon":"bun run add-icon.ts","generate":"bun run generate.ts","build-cli":"bun build add-icon.ts --target node --format esm --outfile bin/add-icon.mjs","typecheck":"tsc","update-icons":"bun run update-icons.ts","prepublishOnly":"bun run generate.ts"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:084ab08c-e7db-4dff-b536-bcf99433a4ec"}},"repository":{"url":"git+https://github.com/expo/material-symbols.git","type":"git","directory":"packages/expo-material-symbols"},"_npmVersion":"11.11.0","description":"Material Symbols icons for Expo, rendered via @expo/ui.","directories":{},"sideEffects":false,"_nodeVersion":"24.14.1","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest"},"_npmOperationalInternal":{"tmp":"tmp/material-symbols_0.1.0_1777351990100_0.8336123506970612","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@expo/material-symbols","version":"0.1.1","keywords":["android","expo","expo-ui","icons","jetpack-compose","material-design","material-symbols","react-native","vector-drawable"],"author":{"name":"650 Industries, Inc."},"license":"MIT","_id":"@expo/material-symbols@0.1.1","maintainers":[{"name":"ide","email":"ide+npm@jameside.com"},{"name":"brentvatne","email":"brentvatne@gmail.com"},{"name":"evanbacon","email":"baconbrix@gmail.com"},{"name":"expoadmin","email":"support@expo.io"},{"name":"exponent","email":"exponent.team@gmail.com"},{"name":"bycedric","email":"me@bycedric.com"},{"name":"kudochien","email":"ckchien@gmail.com"},{"name":"alanhughes","email":"hughesno1@gmail.com"},{"name":"tsapeta","email":"npm@tsapeta.com"},{"name":"expo-bot","email":"brent+expobotnpm@expo.io"},{"name":"philpl","email":"phil@kitten.sh"},{"name":"wschurman","email":"wschurman@gmail.com"}],"homepage":"https://github.com/expo/material-symbols#readme","bugs":{"url":"https://github.com/expo/material-symbols/issues"},"bin":{"add-material-symbols":"bin/add-material-symbols.mjs"},"dist":{"shasum":"ee86c79e5eebed9c0eccaf7341ba61791b9e6ebd","tarball":"https://registry.npmjs.org/@expo/material-symbols/-/material-symbols-0.1.1.tgz","fileCount":7703,"integrity":"sha512-ruA6hZATOPKxo1qSd1NE3HI9FrmEDwcMDhsvzTAdMkP9AapdHfJ/0tKmBMWFJir85voxs1twYxLVrGW9OLGaOg==","signatures":[{"sig":"MEUCIQC9/VA9LZ8CpBFlAuimWnxWe408e7FOP9PlY/0+1yQVCAIgGXjDdkOLGIXYY2x978PZUEMD4SH19o2+6vxnzM2NcHs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@expo%2fmaterial-symbols@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":4287284},"exports":{"./*.xml":{"types":"./icons/*.xml.d.ts","default":"./icons/*.xml"}},"gitHead":"367f0b53e7c13689deacd8fbb2ab05cfc4fbd08b","scripts":{"test":"bun test","prepare":"bun run build-cli","generate":"bun run generate.ts","build-cli":"bun build add-material-symbols.ts --target node --format esm --outfile bin/add-material-symbols.mjs","typecheck":"tsc","update-icons":"bun run update-icons.ts","prepublishOnly":"bun run generate.ts","add-material-symbols":"bun run add-material-symbols.ts"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:084ab08c-e7db-4dff-b536-bcf99433a4ec"}},"repository":{"url":"git+https://github.com/expo/material-symbols.git","type":"git","directory":"packages/expo-material-symbols"},"_npmVersion":"11.11.0","description":"Material Symbols icons for Expo, rendered via @expo/ui.","directories":{},"sideEffects":false,"_nodeVersion":"24.14.1","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest"},"_npmOperationalInternal":{"tmp":"tmp/material-symbols_0.1.1_1777474335043_0.3172027079186155","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-04-27T19:36:31.302Z","modified":"2026-09-23T11:26:32.616Z","0.0.1":"2026-04-27T19:36:31.697Z","0.1.0":"2026-04-28T04:53:10.395Z","0.1.1":"2026-04-29T14:52:15.324Z"},"bugs":{"url":"https://github.com/expo/material-symbols/issues"},"author":{"name":"650 Industries, Inc."},"license":"MIT","homepage":"https://github.com/expo/material-symbols#readme","keywords":["android","expo","expo-ui","icons","jetpack-compose","material-design","material-symbols","react-native","vector-drawable"],"repository":{"url":"git+https://github.com/expo/material-symbols.git","type":"git","directory":"packages/expo-material-symbols"},"description":"Material Symbols icons for Expo, rendered via @expo/ui.","maintainers":[{"email":"ide+npm@jameside.com","name":"ide"},{"email":"brentvatne@gmail.com","name":"brentvatne"},{"email":"support@expo.io","name":"expoadmin"},{"email":"exponent.team@gmail.com","name":"exponent"},{"email":"me@bycedric.com","name":"bycedric"},{"email":"ckchien@gmail.com","name":"kudochien"},{"email":"hughesno1@gmail.com","name":"alanhughes"},{"email":"npm@tsapeta.com","name":"tsapeta"},{"email":"brent+expobotnpm@expo.io","name":"expo-bot"},{"email":"phil@kitten.sh","name":"philpl"},{"email":"ccheever@gmail.com","name":"ccheever"},{"email":"sz.dziedz@gmail.com","name":"szdziedzic"},{"email":"wschurman@gmail.com","name":"wschurman"}],"readme":"# @expo/material-symbols\n\n[Material Symbols](https://fonts.google.com/icons) icon library for Expo/React Native Android. Icons are Android XML vector drawables, imported as Metro assets and rendered via `@expo/ui`. Only the icons you import are bundled — each icon lives at its own subpath (`@expo/material-symbols/star.xml`), so unused icons are never resolved by Metro.\n\nOnly the **outlined** style is shipped at the moment. For rounded or sharp styles, see [Using custom XML icons](#using-custom-xml-icons).\n\n## Installation\n\n```bash\nbun add @expo/material-symbols\n```\n\n## Usage\n\nEach icon is imported from its own subpath:\n\n```tsx\nimport { Host, Icon } from \"@expo/ui/jetpack-compose\";\nimport Star from \"@expo/material-symbols/star.xml\";\nimport Home from \"@expo/material-symbols/home.xml\";\n\n<Host matchContents>\n  <Icon source={Star} size={32} tint=\"#007AFF\" />\n</Host>;\n```\n\n- **`size`** — icon size in dp\n- **`tint`** — any React Native `ColorValue` (hex, named color, etc.). Overrides the XML's fill color at runtime.\n- **`<Host matchContents>`** is required — without it the Compose host has 0×0 size.\n\n## How it works\n\n- `update-icons.ts` downloads the latest Material Symbols metadata from Google Fonts.\n- `generate.ts` uses that metadata to fetch the official outlined Android XML vector drawables from Google's asset host (`icons/*.xml`) and writes a per-icon `.xml.d.ts` next to each one so TypeScript can verify the subpath.\n- The package's `exports` map points `./*.xml` at `./icons/*.xml`, so `import Star from \"@expo/material-symbols/star.xml\"` resolves to the asset and Metro returns a numeric asset ID.\n- The `@expo/ui` `<Icon>` component resolves the asset and renders it natively via Jetpack Compose.\n- Icons and their `.d.ts` files are generated at publish time via `prepublishOnly` and shipped in the npm tarball. They're gitignored in the repo, so run `bun run generate` after cloning to populate `icons/` for local development.\n\n## CLI: adding individual icons\n\nThe `add-material-symbols` CLI downloads Material Symbols icons as Android XML vector drawables. This is useful when you want specific styles or axis values (fill, weight, grade, optical size) beyond the default outlined set.\n\n```bash\n# By name (defaults: outlined, weight 400, no fill, grade 0, 24px)\nnpx add-material-symbols search\n\n# Multiple icons at once\nnpx add-material-symbols search star home\n\n# Rounded style\nnpx add-material-symbols --style rounded search star\n\n# Sharp + filled\nnpx add-material-symbols --style sharp --fill favorite\n\n# Custom weight\nnpx add-material-symbols --weight 300 star\n\n# From a Google Fonts URL (preserves the axes you picked in the UI)\nnpx add-material-symbols \"https://fonts.google.com/icons?selected=Material+Symbols+Outlined:check_box:FILL@1;wght@300;GRAD@0;opsz@24\"\n\n# Custom output directory\nnpx add-material-symbols -o ./my-icons search\n```\n\n| Option                  | Description                                    | Default     |\n| ----------------------- | ---------------------------------------------- | ----------- |\n| `-o, --output <dir>`    | Output directory                               | `./assets`  |\n| `-s, --style <style>`   | Icon style: `outlined`, `rounded`, `sharp`     | `outlined`  |\n| `-f, --fill`            | Use filled variant                             |             |\n| `-w, --weight <wght>`   | Weight: 100–700                                | `400`       |\n| `-g, --grade <grad>`    | Grade: -25, 0, 200                             | `0`         |\n| `--opsz <size>`         | Optical size: 20, 24, 40, 48                   | `24`        |\n| `-h, --help`            | Show help                                      |             |\n\nThe output is a ready-to-use XML vector drawable that you can import directly (see [Using custom XML icons](#using-custom-xml-icons)).\n\n## Using custom XML icons\n\nYou can use your own Android XML vector drawables. Place them anywhere in your project and import them:\n\n```tsx\nimport { Host, Icon } from \"@expo/ui/jetpack-compose\";\n\nconst MyIcon = require(\"./assets/my-icon.xml\");\n\n<Host matchContents>\n  <Icon source={MyIcon} size={32} />\n</Host>;\n```\n\nThis works for rounded, sharp, or any custom Material Symbols style — you can download the Android drawable XML directly from Google Fonts via `add-material-symbols`, or provide your own XML asset.\n\n## Credits\n\nThe icons are from Google's [Material Symbols](https://github.com/google/material-design-icons), licensed under [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0). Package generation uses Google Fonts metadata and Google-hosted Android XML assets.\n\n## Development\n\nThis package lives in the [`expo/material-symbols`](https://github.com/expo/material-symbols) monorepo. From the repo root:\n\n```bash\nbun install\ncd packages/expo-material-symbols && bun run generate  # regenerate icons\ncd example && bun run android                          # run the example app\n```\n","readmeFilename":"README.md"}