Material Design Symbols #

A Flutter library for Google's Material Symbols. While several packages offer Material Symbols for Flutter, this package addresses common gaps—most notably, strict adherence to Dart's naming conventions.

It builds on the architecture and features of the la_icons package while introducing several key improvements.

Why Material Symbols? #

To learn more about the differences between Material Symbols and standard Material Icons, check out Google's GitHub repository. In short, Material Symbols use dynamic variable fonts, allowing you to customize properties like weight, optical size, and fill.

Browse available icons on the Google Fonts page.

Features #

• Four distinct styles: Available in Filled, Outlined, Sharp, and Rounded. Filled and Outlined share the same base set with fill properties predefined (1.0 and 0.0, respectively). All four styles include the complete icon set.
• Idiomatic Dart naming: Uses idiomatic camelCase names for getters and constructors while preserving original snake_case icon names for dynamic IconData access.
• Flutter tree-shaking support: Includes @staticIconProvider annotations as recommended in the Flutter documentation.
• Map access: Static iconMap properties on SymbolsFilled, SymbolsOutlined, SymbolsSharp, and SymbolsRounded let you access IconData via map lookup (e.g., Icon(SymbolsSharp.iconMap['search_gear'])).
• Name lookup helper: Access IconData by string name using byName (e.g., Icon(SymbolsSharp.byName('search_gear'))).
• Direct widget constructors: Singular Symbol* classes (e.g., SymbolOutlined) are provided alongside plural Symbols* classes to reduce boilerplate (e.g., SymbolOutlined.zonePersonAlert() instead of Icon(SymbolsOutlined.zonePersonAlert)).
• Const constructors: Fully supports const constructors (e.g., const SymbolOutlined.zonePersonAlert()).
• Icon parameter parity: Symbol* constructors accept the exact same parameters as standard Icon widgets. For example, SymbolRounded.textRotateUp(color: Colors.red) is equivalent to Icon(SymbolsRounded.textRotateUp, color: Colors.red).
• Name conversion & reserved words: Preserves original Material Symbol names with standard Dart adaptations. Names starting with numbers use spelled-out word prefixes (e.g., 3d becomes threeD), and reserved Dart keywords receive a trailing underscore (e.g., class becomes class_).

Getting Started #

Installation #

Add material_design_symbols to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  material_design_symbols: ^1.0.0

Then run:

flutter pub get

Usage #

Import the package and use the widget constructors directly:

import 'package:material_design_symbols/material_design_symbols.dart';

const Widget icon = SymbolOutlined.zonePersonAlert();

Or pass IconData from a Symbols* class into a standard Flutter Icon widget:

import 'package:material_design_symbols/material_design_symbols.dart';

Widget icon = Icon(SymbolsRounded.textRotateUp);

You can also look up icons dynamically by string name using byName:

import 'package:material_design_symbols/material_design_symbols.dart';

Widget icon = Icon(SymbolsRounded.byName('text_rotate_up'));

Or look up icons directly via the static map:

import 'package:material_design_symbols/material_design_symbols.dart';

Widget icon = Icon(SymbolsRounded.iconMap['text_rotate_up']);

Example #

import 'package:flutter/material.dart';
import 'package:material_design_symbols/material_design_symbols.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Material Design Symbols Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Material Symbols for Flutter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 48.0),
            // Direct widget constructor using SymbolOutlined
            const SymbolOutlined.zonePersonAlert(
              size: 48.0,
              color: Colors.red,
            ),
            const Text(
              'SymbolOutlined.zonePersonAlert(size: 48.0, color: Colors.red)',
            ),
            const SizedBox(height: 24.0),
            // Standard approach: passing IconData into an Icon widget
            const Icon(
              SymbolsOutlined.zonePersonAlert,
              size: 48.0,
              color: Colors.blue,
            ),
            const Text(
              'Icon(SymbolsOutlined.zonePersonAlert, size: 48.0, color: Colors.blue)',
            ),
            const SizedBox(height: 24.0),
            // Dynamic map lookup approach
            Icon(
              SymbolsOutlined.iconMap['zone_person_alert'],
              size: 48.0,
              color: Colors.amber,
            ),
            const Text(
              "Icon(SymbolsOutlined.iconMap['zone_person_alert'], size: 48.0, color: Colors.amber)",
            ),
          ],
        ),
      ),
    );
  }
}

Working Example #

You can find a complete, functional Flutter example in the example directory on GitHub.

Check out the live interactive web demo on the demo page.

Repository & Source Code #

Feel free to inspect, fork, or modify the source code on GitHub.