Problem Statement

Google's Material Symbols is the latest and recommended icon set for Material Design, superseding the classic Material Icons. It offers significant advantages, including:

1. Variable Font Axes: A single font file supports adjustments for Fill, Weight, Grade, and Optical Size, providing incredible flexibility.
2. Expanded Icon Library: It includes thousands of icons, covering more use cases than the original set.
3. Modern Standard: It is the current design standard for all new Google products and Material 3 design systems.

Currently, @expo/vector-icons provides excellent support for the legacy MaterialIcons, but lacks built-in support for MaterialSymbols.

Why This Is Important for Expo Developers

To use Material Symbols in an Expo project today, a developer must manually:

1. Download the font file (.ttf).
2. Add the font to their project assets.
3. Load it using expo-font in their app's root component.
4. Fetch the codepoints file to create a glyph map (a large object mapping icon names to character codes).
5. Create a custom <Icon> component to apply the font family and render the correct character from the map.

This process adds significant boilerplate, increases maintenance overhead, and creates a barrier for developers wishing to adopt modern design standards. Providing first-class support would align perfectly with Expo's mission to simplify and accelerate app development.

Proposed Solution

I propose that @expo/vector-icons integrates the Material Symbols icon set, ideally using the variable font version to expose its full capabilities.

This would involve:

1. Bundling the Material Symbols variable font (MaterialSymbols[FILL,GRAD,opsz,wght].ttf).
2. Generating a glyph map from the official codepoints file.
3. Exporting a new component, <MaterialSymbols />, with an API consistent with existing components like <MaterialIcons />.

Example of Ideal Usage

The developer experience would become as simple as:

import { MaterialSymbols } from '@expo/vector-icons';

// Standard usage
const MyComponent = () => <MaterialSymbols name="home" size={24} color="black" />;

// Advanced usage leveraging variable font properties
const AdvancedIcon = () => (
  <MaterialSymbols
    name="settings"
    size={32}
    color="blue"
    fontVariationSettings={{
      fill: 1,
      weight: 700,
      grade: 200,
      opticalSize: 48
    }}
  />
);

(Note: The props for variable settings like fill and weight could be top-level for an even better DX, if feasible.)

Implementation Pointers

• Official Font Source: github.com/google/material-design-icons/tree/master/variablefont
• Codepoints File: github.com/google/material-design-icons/.../codepoints

The integration would likely follow the same pattern used for the existing icon sets in this library.

Thank you for considering this feature. Adding Material Symbols would be a massive improvement for the Expo ecosystem and would empower developers to build more modern, flexible, and beautiful applications with less effort.