The Material Design Icons Icon pack available as set of Flutter Icons.

Overview

Gitpod Ready-to-Code

material_design_icons_flutter

The Material Design Icons Icon pack available as set of Flutter Icons.

Based on Material Design Icons 6.5.95. See a web demo build with this package.

👍 Like us on pub.dev!

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

  material_design_icons_flutter: 5.0.6595

WARNING: MDI's version is based on their icons quantity, which does not strictly respect semver guide. They do try their best to keep icons in same name between minor releases but name changing may still appear. To not break your application, using a fix version in your pubspec.yaml is highly recommended.

Usage

import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return new IconButton(
      // Use the MdiIcons class for the IconData
      icon: new Icon(MdiIcons.sword),
      onPressed: () { print('Using the sword'); }
     );
  }
}

Or, if you want to access the icon by a string name, you can use fromString method to create one.

import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return new IconButton(
      // Use the string name to access icons.
      icon: new Icon(MdiIcons.fromString('sword')),
      onPressed: () { print('Using the sword'); }
     );
  }
}

Note: This is not recomended because to make fromString work we need a map for all icon names. Using this method will not get the benefits of tree-shaking.

On flutter 1.22 and above, using fromString method will also cause a compile error This application cannot tree shake icons fonts, which can be bypass by building with --no-tree-shake-icons.

Name Conversion

Some icons' names are reserved keywords in Dart (and most other languages), so they have been changed.

  • null -> nullIcon
  • switch -> switchIcon
  • sync -> syncIcon
  • factory -> factoryIcon
Comments
  • It would be nice to get the icon by string for late binding

    It would be nice to get the icon by string for late binding

    Hello, thank you for this great package. I using late binding and would like to define Icons by there name like MdiIcons('sword'). That would allow me to define the icons in the domain without the reference of the package and I could create the UI dynamically in run-time.

    opened by ride4sun 11
  • "This application cannot tree shake icons fonts" error occurs after upgrading flutter to 1.22.0, breaking build

    After upgrading flutter to 1.22.0, the following error occurred when trying to build the Android App bundle

    This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:
      - file:///C:/Dev/flutter/.pub-cache/hosted/pub.dartlang.org/material_design_icons_flutter-4.0.5655/lib/material_design_icons_flutter.dart:5680:12
                                                                            
                                                                            
    FAILURE: Build failed with an exception.
    
    * Where:
    Script 'C:\Dev\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 904
    
    * What went wrong:
    Execution failed for task ':app:compileFlutterBuildRelease'.
    > Process 'command 'C:\Dev\flutter\bin\flutter.bat'' finished with non-zero exit value 1
    
    wontfix 
    opened by sceee 10
  • Each new release changes the values stored in icon_map.dart

    Each new release changes the values stored in icon_map.dart

    Is there a way to preserve the values for the icon keys that you store in icon_map.dart ? It seems that each new release of this plugin - keys change values which will result in misleading and incorrect icons being displayed in apps that use this plugin.

    Use case :

    • Sometimes it is necessary to store the value for an icon in (say) firebase.
    • When you are dealing with thousands of users, its more cost effective to store the icon value as an int rather than the keyname

    Thus, if the unicode integer value is stored and you then give a completely different value to a key that an app has previously persisted you end up with incorrect icons being shown.

    A code solution I appreciate that one can store the keyname but doing so in this way will 1) prevent tree shaking and 2) incur more in terms of cloud costs since strings incur more overhead than ints in cloud firestore.

    image

    To insulate against this problem, when you use one of the 3rd party apps/websites that creates a TTF from an SVG - one can specify a starting offset position as the basis for creating a unique unicode value. All we need to do is ensure that the unicode offset position is 1 more than the last icon unicode value in icon_map.

    This assumes that values in icon_map are sequential.

    opened by MsXam 5
  • Is that possible to use this package somehow in flutter_web?

    Is that possible to use this package somehow in flutter_web?

    After reading https://github.com/flutter/flutter_web/tree/master/examples/gallery/web/assets, I am not quite sure what to do and if it's possible to use this package somehow in flutter_web. Thanks a lot.

    Edited: by reading this commit, maybe flutter_web will be merged to flutter soon...

    opened by sgon00 5
  • Display material_design_icons in IntelliJ

    Display material_design_icons in IntelliJ

    Is there any way the icons could also be displayed in IntelliJ? The normal Icons are shown beside the corresponding line. We would probably have to ask the creators of the plugin and edit this generator: grafik

    https://github.com/flutter/flutter-intellij/blob/7f67fa1f4100ca09bebb49725069b1d3e007a748/tool/icon_generator/lib/main.dart

    opened by StefanLobbenmeier 5
  • Add Support for Flutter 2.0 with Null Safety

    Add Support for Flutter 2.0 with Null Safety

    Most of the users were started updating to Flutter 2.0 with Null Safety, unfortunately this package not yet reached null safety version. Please have us null safety version of this package as soon as possible.

    Thanks for contributing!

    opened by AathifMahir 4
  • Can you please update the icons when you have time?

    Can you please update the icons when you have time?

    Hi, I found there are some icons that I want to use in materialdesignicons.com missing from this package. Can you please update the icons when you have time? Thank you very much for your hard work.

    opened by sgon00 4
  • Missing cross

    Missing cross

    I noticed this looking for some icons, one of which is cross. While it is present in the official site:

    image

    I couldn't find it in the flutter release. I also tried the web demo you make available and it is not present also there.

    Any idea why that happens? Thanks a ton!

    opened by moovida 3
  • Breaking changes in 3.4.5045

    Breaking changes in 3.4.5045

    This commit broke our app: https://github.com/ziofat/material_design_icons_flutter/commit/d1899c950d4082f122cdcebc575ae7da04c00532

    Lots of icons have different identifiers, for example settingsOutline is now cog. In my opinion this should be a major version bump to 4.x.

    opened by Niek 3
  • support all icon from mdi like power-socket-eu

    support all icon from mdi like power-socket-eu

    When I tried a few non-standard Mdi Icon like MdiIcons.fromString('power-socket-eu') it can't display on flutter ui, can you make it work?

    https://iconify.design/icon-sets/mdi/power-socket-eu.html

    Thank you, love the package.

    opened by tuanha2000vn 3
  • fix: don't loop when matches is empty

    fix: don't loop when matches is empty

    Hi,

    I've got an error on MdiIcons.fromString when Iterable<Match> matches = exp.allMatches(str); in MdiIcons.toCamelCase match nothing because for (Match m in matches) has an empty Iterable. Let me know if you have requests.

    Thanks

    opened by ItsJimi 2
  • Unsupported icon package: Package always displays blank icon previews.

    Unsupported icon package: Package always displays blank icon previews.

    Hi, I want to be able to see MdiIcons on the gutter of Android Studio.

    When I set up Preferences > Languages & Frameworks > Flutter Font Packages value to material_design_icons_flutter, it shows this popup at the bottom right:

    image

    Also the pull request for this feature (https://github.com/flutter/flutter-intellij/pull/5595) explicitly states that the icons are blank: image (image from that pull request)

    As you can see, line 18 with MdiIcons icon has no gutter preview.

    Can you please fix this?

    opened by SivkovSavely 0
  • Wrong Icons presented.

    Wrong Icons presented.

    I have no idea why but when I call:

                                    icon: const Icon(
                                      MdiIcons.arrowSplitHorizontal,
                                    ),
    

    I get: image

    All icons are wrong, I even tried by name same effect. Any idea why ?

    opened by Mmisiek 4
  • Add icon in comments to be able to preview it

    Add icon in comments to be able to preview it

    Would be cool, if we could use the same logic that the inbuilt material icons use to display the icon in the autocomplete feature of the IDE.

    /// <i class="material-icons-round md-36">timer_off</i> &#x2014; material icon named "timer off" (round).
    static const IconData timer_off_rounded = IconData(0xf023b, fontFamily: 'MaterialIcons');
    
    /// <i class="material-icons-outlined md-36">timer_off</i> &#x2014; material icon named "timer off" (outlined).
    static const IconData timer_off_outlined = IconData(0xf449, fontFamily: 'MaterialIcons');
    
    /// <i class="material-icons md-36">tips_and_updates</i> &#x2014; material icon named "tips and updates".
    static const IconData tips_and_updates = IconData(0xf058d, fontFamily: 'MaterialIcons');
    

    Like this:

    image

    opened by lukaskurz 0
  • const Map/List of all IconData

    const Map/List of all IconData

    As it looks to me the package is auto generated based on the MDI font. (Or that is how i've done it with the simple icons package)

    Please consider adding a static list, where one can get all the icons at one. Example:

    static const List<IconData> all = [
        MdiIcons.abTesting,
      ];
    

    Every user of the library could implement this themself, but with so many icons this would take a lot of time. Under the premise that the mdi.dart is autogenerated, this might be just one line of code for you :pray: .

    Example Use Case: There is the icon_picker which takes a Map<String, IconData> of icons. For performance improvements an already existing const List or Map of IconData might be beneficial.

    opened by jlnrrg 3
  • [web] Incorrect trimming result

    [web] Incorrect trimming result

    Only the Web. This example uses the same code with the same icon in MDI and in the native implementation. In this case, the icon is shifted in the MDI:

    import 'package:flutter/material.dart';
    import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
    
    void main() async {
      runApp(App());
    }
    
    class App extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.light(),
          home: AppCore(),
        );
      }
    }
    
    class AppCore extends StatefulWidget {
      @override
      _AppCoreState createState() => _AppCoreState();
    }
    class _AppCoreState extends State<AppCore> {
    
      
      @override
      Widget build(BuildContext context) {
        return Row( crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              child: Icon(Icons.check_box_outline_blank, size: 68),
              // child: Icon(MdiIcons.checkboxBlankOutline, size: 68),
              decoration: BoxDecoration( color: Colors.red ),
              clipBehavior: Clip.antiAlias,
            )
          ],
        );
      }
    }
    

    Native:

    Screenshot 2020-10-19 at 11 04 37

    MDI:

    Screenshot 2020-10-19 at 11 05 41
    opened by Sammius 5
Owner
ziofat
ziofat
The Font Awesome Icon pack available as Flutter Icons

font_awesome_flutter The Font Awesome Icon pack available as set of Flutter Icons. Based on Font Awesome 5.15.4. Includes all free icons: Regular Soli

Flutter Community 731 Dec 28, 2022
The COCO icon pack with - +600 Editable icons available for your flutter project.

cocoicons The COCO icon pack with - +600 Editable icons available for your flutter project. Made from COCO icon pack. ?? Installation In the dependenc

Samuel Abada 5 Sep 23, 2022
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Icons Launcher - A command-line tool that simplifies the task of updating your Flutter app's launcher icon.

Icons Launcher - A command-line tool that simplifies the task of updating your Flutter app's launcher icon. Full flexibility allows you to only update the launcher icon for specific platforms as needed.

Mrr Hak 48 Nov 17, 2022
Flutter application for latest news by top newspapers . And allow for share articles with friends. Now available in night mode. Also landscape mode is available

Breaking News Latest news for almost 55 country. Feature of saving article and search ariticles. Used API https://newsapi.org/ Note: if data is not ge

null 7 Oct 24, 2022
A Flutter widget to set time with spinner instead of material time picker

flutter_time_picker_spinner Time Picker widget with spinner instead of a material time picker. 12H format 24H format 24H format with second Custom sty

Bobby Stenly Irawan 34 Aug 8, 2022
A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Flutter_MaterialSheetAndNavigationDrawer If this project helped you reduce developement time or you just want to help me continue making useful tools

Bryan Cancel 30 Dec 4, 2021
Material io ext - A collection of extensions for creating widgets following material.io guidelines

material_io_ext It is a collection of extensions for creating widgets following

BetterX.io 3 Jan 28, 2022
With this pack you can use the biometrics systems of Android and IOS devices.

native_auth With this pack you can use the biometrics systems of Android and IOS devices. It will ask for the user which the biometric authentication

Weliton Sousa 7 Nov 2, 2022
Flutter plugin to implement a Boom Menu, with icons, title, subtitle, animated FAB Icons and hide on scrolling.

Flutter Boom Menu Usage The BoomMenu widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton wi

Mohanraj 88 Aug 1, 2022
Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

Fluent UI System Icons Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft. Icon List View the full list of

Microsoft 4.3k Dec 29, 2022
First Open Source Flutter based material design music player with audio plugin to play online music

Flutter Music App First Open Source Flutter based dribbblel Design Music Player. logo free design http://www.freeuid.com/category/free material icons

佩奇的弟弟乔治 380 Jan 4, 2023
Flutter plugin to implement a Material Design Speed Dial

Flutter Speed Dial Flutter package to render a Material Design Speed Dial. Usage The SpeedDial widget is built to be placed in the Scaffold.floatingAc

Dario Ielardi 349 Jan 2, 2023
A Simple but elegant Calculator app made with Flutter using Google's Material Design with Currency (Exchange Rate) and Unit Converter.

Calculator A Simple but elegant Calculator app made with Flutter using Google's Material Design with Currency (Exchange Rate) and Unit Converter. Down

Hemant Rajput 15 Dec 7, 2022
First Open Source Flutter based Beautiful Material Design Text fields.

Pretty text field First Open Source Flutter based Beautiful Material Design Text fields.(More designed text fields coming soon.) Features [*] Compatib

Darshh 1 Aug 29, 2022
Flutter package to render a Material Design Speed Dial.

Flutter Speed Dial Flutter package to render a Material Design Speed Dial. Usage The SpeedDial widget is built to be placed in the Scaffold.floatingAc

null 0 May 20, 2022
Deepak Sharma 149 Dec 10, 2022
A simplistic mobile application with Material design that helps you communicate using different phonetic alphabets

Speak NATO A simplistic mobile application with Material design that helps you communicate using different phonetic alphabets. Installation Screenshot

Oleksandr Kravchuk 5 Nov 9, 2022