Svg Icon Sets

index.html

<div ng-controller="DemoCtrl" layout="column" layout-margin="" ng-cloak="" class="icondemoSvgIconSets" ng-app="MyApp">

    <p>Morph md-icon from one icon to the other:</p>

    <p>
      <ng-md-icon icon="{{ icon }}" size="36px" ng-click="changeIcon()"></ng-md-icon>
    </p>

</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

script.js

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngMdIcons'])
  .controller('DemoCtrl', function($scope) {
  $scope.icon = "menu";
  
  $scope.changeIcon = function() {
    $scope.icon = $scope.icon === 'arrow_back' ? 'menu' : 'arrow_back';
  }
})
  .config(['$mdIconProvider', function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
      .defaultIconSet('img/icons/sets/core-icons.svg', 24);
  }]);


/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.0/angular-material-icons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js"></script>

style.css

* {
  outline: none;
}

.icondemoSvgIconSets md-progress-circular {
  margin-bottom: 20px; }

.icondemoSvgIconSets md-icon {
  margin: 20px;
  margin-top: 0;
  width: 24px;
  height: 24px; }

.icondemoSvgIconSets .demo-content {
  min-height: 210px; }

.icondemoSvgIconSets .appSvgIconSets {
  padding: 25px; }

.icondemoSvgIconSets .s48 {
  width: 48px;
  height: 48px; }


/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/

ng-md-icon {
            fill: black;
            -webkit-transition: fill 750ms ease-in-out;
            -moz-transition: fill 750ms ease-in-out;
            -o-transition: fill 750ms ease-in-out;
            transition: fill 750ms ease-in-out;
        }
        ng-md-icon > svg {
            -webkit-transition: width 750ms ease-in-out, height 750ms ease-in-out;
            -moz-transition: width 750ms ease-in-out, height 750ms ease-in-out;
            -o-transition: width 750ms ease-in-out, height 750ms ease-in-out;
            transition: width 750ms ease-in-out, height 750ms ease-in-out;
        }

styles

<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />

Svg Icon Sets.markdown

Svg Icon Sets

A Pen by neil kalman on CodePen.

License.