Ember Material Design Icons

An ember-cli addon for using Material Design Icons in Ember applications.

Demo

Compatibility

• Ember.js v3.28 or above
• Embroider or ember-auto-import v2

Installation

ember install ember-mdi

Usage

There are more than 7k icons and we can't store they all in a build by an performance issue. For this reason import an icon into your project for use it in template. Example:

//app/components/icons/github.js
export { Github as default } from 'ember-mdi';

{{! app/templates/application.hbs }}
<Icons::Github/>

Another way to use the icons is import they in a controller or a component. Example:

//app/controllers/application.js
import Controller from '@ember/controller';
import { Github } from 'ember-mdi';

export default class ApplicationController extends Controller {
  Github = Github;
}

{{! app/templates/application.hbs }}
<this.Github/>

Options

All icons have some options with default values:

Name	Value
@size	24
@title	null
@fill	null
@role	"img"
@spin	false
@flipH	false
@flipV	false
@rotate	null
@stroke	null
@strokeWidth	null
@strokeLinecap	null
@strokeLinejoin	null
@strokeDasharray	null
@strokeDashoffset	null
@strokeOpacity	null

System-wide config

Use a mixin-function for system-wide extending the icons:

//app/components/submarine/github.js
import { Submarine } from 'ember-mdi';

// Mixin
function Yellow(BaseClass) {
  return class extends BaseClass {
    get fill() {
      return 'yellow';
    }
  };
}

export default Yellow(Submarine);

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.