angular-material md-button Creating an icon button


This example will be using the class md-icon-button, which must be applied to <md-button> in order to get an icon button.

  • It is also recommended to add an aria-label attribute to <md-button> for accessibility purpose or the ARIA provider will throw a warning that there is no aria-label.
  • Usually, there is an <md-icon> element in the <md-button> attribute.
  • Optionally, there also may be an <md-tooltip> element to provide tooltips for the button.

This example will be using Material Icons by Google.


<html ng-app="mdIconButtonApp">
        <!-- Import Angular -->
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <!-- Angular Material -->
        <script src=""></script>
        <link href="" rel="stylesheet">
        <!-- Material Icons -->
        <link href=""
        <!-- Roboto -->
        <link href="" rel="stylesheet">
        <!-- app.js -->
        <script src="app.js"></script>
            body {
                font-family: Roboto, sans-serif;
        <md-content ng-controller="mdIconButtonController">
            Normal `md-button`
            Note that it is recommended to add a `aria-label` to `md-icon-button` for accessibility purposes.
            <md-button class="md-icon-button" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">menu</md-icon>
            <md-button class="md-primary md-icon-button" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">menu</md-icon>
                <md-tooltip>This is a tooltip!</md-tooltip>
            <md-button class="md-accent md-icon-button md-fab" ng-click="goToLink('')" aria-label="Go To Android">
                <md-icon class="material-icons">android</md-icon>
            <md-button class="md-warn md-icon-button" ng-href="{{link}}" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">{{icon}}</md-icon>
            <md-button class="md-raised md-icon-button" ng-click="goToLink('')">
                <!-- Note that you must have $mdIconProvider for this -->
                <md-icon md-svg-icon="link"></md-icon>
            <md-button class="md-cornered md-primary md-hue-1 md-icon-button" aria-label="{{ariaLabel}}">
                <!-- You can also use the source of SVG -->
                <md-icon md-svg-src="/path/to/more.svg"></md-icon>
            <md-button class="md-accent md-hue-2" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">g-translate</md-icon>
            <md-button class="md-warn md-hue-3 md-icon-button" ng-href="{{link}}" aria-label="Link">
                <md-icon md-svg-icon="copyright"></md-icon>


angular.module('mdIconButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.config(function($mdIconProvider) {
    // Configure iconsets: More info:$mdIconProvider
                   .icon('sample-icon', '/path/to/sample-icon.svg');
.controller('mdIconButtonController', function($scope) {
$scope.ariaLabel = "Button";
$scope.icon = "menu";
$ = "";
$scope.goToLink = function(link) {
    // Go to some site
    console.log('Redirecting to:' + link);