Ember-mdi NPM | npm.io

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.24 or above
Ember CLI v3.24 or above
Node.js v12 or above

Demo

Getting Started

Install in ember-cli application

ember install 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: ['heart', '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'
}