material_icons 1.1.0

  • Installing
  • Versions
  • 34

Dart Material SVG Icons

Optimized for Dart + SASS

Material Design Icons are the official open-source icons featured in the Google Material Design specification. This project provides this icon-set for Dart.

What's cool

Googles original version comes "only" with black or white SVGs.
material_icons allows you to theme your icons!!!
Tested with Chrome, Safari, FF + IE.



  • Clone the "purple" example
    • Your main.scss should look something like this:
    $icon-color: nth($palette-primary, 2);
    @import "packages/material_icons/sass/svg-utils";
    @import "material_icons";
  • Open <a href="" target="_blank">[this]</a> page
    • Use Chrome or Safari for this!
  • Click on icon that you want to include in your project
  • Copy the _material-icons.scss section
  • Paste it into your _material-icons.scss
@import 'packages/material_icons/sass/action/svg/production/ic_account_box_18px';

.bg-ic_account_box_18px {
    @include svg-background("18");
    /* you can exclude or delete this line */
    @include svg-fallback("action/svg/production/ic_account_box_18px.svg","action/2x_web/ic_account_box_black_18dp.png","action/2x_web/ic_account_box_white_18dp.png","action/2x_web/ic_account_box_grey600_18dp.png");
    background-image: svg-ic_account_box_18px($icon-color);
  • Copy the index.html section
  • Paste it into your index.html
    <div class="bg-ic_favorite_24px svg-size-24 svg-bg"></div>
  • In main.scss define your icon-color: $icon-color : #9B30FF;
  • In web/styles: sass main.scss main.css -r ../packages/material_icons/sassext/urlencode.rb
  • and: autoprefixer main.css

Note: You may ask what the hack???? does that mean:
-r ../packages/material_icons/sassext/urlencode.rb
You are adding a custom ruby-function to sass - here it is urlencode(...).
The inline SVG get urlencoded and makes IE happy.

That's it.
Your page should look like <a href="" target="_blank">[this]</a> page

###Play with your index.html###

<body class="no-svg fallback-white">
    <div class="bg-ic_favorite_24px svg-size-24 svg-bg"></div>
    <div class="bg-ic_account_balance_24px svg-size-24 svg-bg fallback-grey"></div>
    <div class="bg-ic_accessibility_48px svg-size-48 svg-bg"></div>

no-svg - turns off svg and uses png's instead
fallback-white | fallback-black | fallback-grey - PNG color to use
This option can also be specified per div (line 3).

You can see a reallife sample using this technique on

Features and bugs

Please file feature requests and bugs at the issue tracker.


Copyright 2016 Michael Mitterer (,
IT-Consulting and Development Limited, Austrian Branch

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
either express or implied. See the License for the specific language
governing permissions and limitations under the License.

If this plugin is helpful for you - please (Circle) me
or star this repo here on GitHub.

Change Log for material_icons

Google Material icons - optimized for Dart + SASS

v1.0.4 - 2016-11-16


v1.0.3 - 2015-12-04


v1.0.2 - 2015-03-20


v1.0.1 - 2015-03-18


  • Inline SVGs are urlencoded now 0eb8479

This was generated with Changelog for Dart

1. Depend on it

Add this to your package's pubspec.yaml file:

  material_icons: "^1.1.0"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

Alternatively, your editor might support pub get or packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:material_icons/material_icons.dart';
Version Uploaded Documentation Archive
1.1.0 Dec 13, 2017 Go to the documentation of material_icons 1.1.0 Download material_icons 1.1.0 archive
1.0.4 Nov 16, 2016 Go to the documentation of material_icons 1.0.4 Download material_icons 1.0.4 archive
1.0.3 Dec 4, 2015 Go to the documentation of material_icons 1.0.3 Download material_icons 1.0.3 archive
1.0.2 Mar 20, 2015 Go to the documentation of material_icons 1.0.2 Download material_icons 1.0.2 archive
1.0.1 Mar 18, 2015 Go to the documentation of material_icons 1.0.1 Download material_icons 1.0.1 archive


This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • completed on Jan 17, 2018
  • Dart: 2.0.0-dev.15.0
  • pana: 0.9.1


Describes how popular the package is relative to other packages. [more]
28 / 100
Code health derived from static analysis. [more]
0 / 100
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]


Detected platforms: Flutter, server, web

No platform restriction found in libraries.


  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use material_icons.dart.

  • Use analysis_options.yaml.

    Rename old .analysis_options file to analysis_options.yaml.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.8.0 <2.0.0
browser ^0.10.0 0.10.0+2
Dev dependencies
grinder any
test any