Ember Material Design Icons

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

All icons are stored in the file vendor.js.

Compatibility

• Ember.js v3.16 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Demo

Getting Started

Install in ember-cli application

ember install ember-mdi

Then include the following in your app.scss file:

@import "ember-mdi";

Usage

<MdIcon @icon="alert"/>

We get follow html:

<svg class="md-icon md-icon-alert" width="24" height="24" viewBox="0 0 24 24" role="img">
  <path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z" />
</svg>

Component md-icon has 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

Configuration

By default ember-mdi stores all icons. And it has the size about 750KB. If you don't need all icons, use the option icons for limit their. And ember-mdi will store only your specific icons. Don't forget restart ember serve.

// ember-cli-build.js

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-mdi': {
      icons: ['face', 'bug'],
    }
  });

  ...
};

System-wide config

If you want to apply some options to all your icons, you need create the md-icon component and apply they inside it:

import MdIcon from 'ember-mdi/components/md-icon';

export default class extends MdIcon {
  // Place here your preferences
  size = 28
  fill = 'blue'
}

Contributing

See the Contributing guide for details.

License

ember-mdi is released under the MIT License. See the bundled LICENSE file for details.