Getting Started with AngularJS

In AngularJS, you will want to use a method that cleanly inserts SVG inline.

Standalone Directive

If you need a standalone directive we suggest using the one below.

<!-- After defining in mdiService.add('account', 'data here') --> <mdi name="account"></mdi> <!-- Or directly... --> <mdi data="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></mdi>
angular.module('app', ['mdi']) .controller('exampleController', [ 'mdiService', function (mdiService) { // Individually mdiService.add('account', 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'); // or in the config } ])

Frameworks

Some frameworks have specific implementations for using iconography, as shown below.

Angular Material

The mdi.svg file contains all the icons provided on the site. Use inline with $mdIconProvider.

app.config(function($mdIconProvider) { $mdIconProvider .defaultIconSet('my/app/mdi.svg') });
<md-icon md-svg-icon="android"></md-icon> <md-button aria-label="Android" class="md-icon-button"> <md-icon md-svg-icon="android"></md-icon> </md-button>