<div ng-controller="DemoCtrl" ng-cloak layout="column" layout-margin>
    <p>The simplest way to display a single SVG icon is by referencing it by URL:</p>
    <p>
        <md-icon md-svg-src="{{ insertDriveIconURL }}"
                 aria-label="Insert Drive Icon">
        </md-icon>
    </p>

    <p>Style the icon size and color with CSS:</p>
    <p>
      <md-icon md-svg-src="img/icons/cake.svg"            class="s24" aria-label="Cake"    ></md-icon>
      <md-icon md-svg-src="{{ getAndroid() }}"            class="s36" aria-label="Android "></md-icon>
      <md-icon md-svg-src="img/icons/addShoppingCart.svg" class="s48" aria-label="Cart"    ></md-icon>
    </p>

    <p>Use data URLs (base64 or un-encoded):</p>
    <p>
      <md-icon
        md-svg-src="data:image/svg+xml;base64, "
        class="s24"
        aria-label="Cake">
      </md-icon>

      <md-icon
        md-svg-src="data:image/svg+xml;base64,{{ getAndroidEncoded() }}"
        class="s36"
        aria-label="Android">
      </md-icon>

      <!-- un-encoded -->
      <md-icon
        md-svg-src="data:image/svg+xml, {{ getCartDecoded() }}"
        class="s48"
        aria-label="Cart">
      </md-icon>
    </p>
</div>

