angular-material Tutorial => Creating an icon button

Example

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.

index.html:

<html ng-app="mdIconButtonApp">
    <head>
        <!-- Import Angular -->
        <script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-animate.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-aria.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Angular%2520Material%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.5.11%2Fangular-material.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Blink%2520href%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.1.4%2Fangular-material.min.css%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Material%2520Icons%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Blink%2520href%3D%26quot%3Bhttps%3A%2F%2Ffonts.googleapis.com%2Ficon%3Ffamily%3DMaterial%2BIcons%26quot%3B%2520%2520rel%3D%26quot%3Bstylesheet%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Roboto%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Blink%2520href%3D%26quot%3Bhttps%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520app.js%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bapp.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bstyle%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520body%2520%7B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520font-family%3A%2520Roboto%2C%2520sans-serif%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%7D%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fstyle%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-content%2520ng-controller%3D%26quot%3BmdIconButtonController%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Normal%2520%60md-button%60%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Note%2520that%2520it%2520is%2520recommended%2520to%2520add%2520a%2520%60aria-label%60%2520to%2520%60md-icon-button%60%2520for%2520accessibility%2520purposes.%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-button%2520class%3D%26quot%3Bmd-icon-button%26quot%3B%2520aria-label%3D%26quot%3B%7B%7BariaLabel%7D%7D%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-icon%2520class%3D%26quot%3Bmaterial-icons%26quot%3B%26gt%3Bmenu%26lt%3B%2Fmd-icon%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-button%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-button%2520class%3D%26quot%3Bmd-primary%2520md-icon-button%26quot%3B%2520aria-label%3D%26quot%3B%7B%7BariaLabel%7D%7D%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-icon%2520class%3D%26quot%3Bmaterial-icons%26quot%3B%26gt%3Bmenu%26lt%3B%2Fmd-icon%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-tooltip%26gt%3BThis%2520is%2520a%2520tooltip!%26lt%3B%2Fmd-tooltip%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-button%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-button%2520class%3D%26quot%3Bmd-accent%2520md-icon-button%2520md-fab%26quot%3B%2520ng-click%3D%26quot%3BgoToLink("https://github.com/android')" aria-label="Go To Android">
                <md-icon class="material-icons">android</md-icon>
            </md-button>
            <md-button class="md-warn md-icon-button" ng-href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%257B%257Blink%257D%257D%26quot%3B%2520aria-label%3D%26quot%3B%257B%257BariaLabel%257D%257D%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-icon%2520class%3D%26quot%3Bmaterial-icons%26quot%3B%26gt%3B%257B%257Bicon%257D%257D%26lt%3B%2Fmd-icon%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-button%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-button%2520class%3D%26quot%3Bmd-raised%2520md-icon-button%26quot%3B%2520ng-click%3D%26quot%3BgoToLink("http://example.com')">
                <!-- Note that you must have $mdIconProvider for this -->
                <md-icon md-svg-icon="link"></md-icon>
            </md-button>
            <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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B%2Fpath%2Fto%2Fmore.svg%26quot%3B%26gt%3B%26lt%3B%2Fmd-icon%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-button%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-button%2520class%3D%26quot%3Bmd-accent%2520md-hue-2%26quot%3B%2520aria-label%3D%26quot%3B%257B%257BariaLabel%257D%257D%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-icon%2520class%3D%26quot%3Bmaterial-icons%26quot%3B%26gt%3Bg-translate%26lt%3B%2Fmd-icon%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-button%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-button%2520class%3D%26quot%3Bmd-warn%2520md-hue-3%2520md-icon-button%26quot%3B%2520ng-href%3D%26quot%3B%257B%257Blink%257D%257D%26quot%3B%2520aria-label%3D%26quot%3BLink%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-icon%2520md-svg-icon%3D%26quot%3Bcopyright%26quot%3B%26gt%3B%26lt%3B%2Fmd-icon%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-button%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-content%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode">


app.js:
angular.module('mdIconButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.config(function($mdIconProvider) {
    // Configure iconsets: More info: https://material.angularjs.org/latest/api/service/$mdIconProvider
    $mdIconProvider.iconSet('/path/to/media-icons.svg')
                   .defaultIconSet('/path/to/icons.svg')
                   .icon('sample-icon', '/path/to/sample-icon.svg');
})
.controller('mdIconButtonController', function($scope) {
$scope.ariaLabel = "Button";
$scope.icon = "menu";
$scope.link = "https://google.com";
$scope.goToLink = function(link) {
    // Go to some site
    console.log('Redirecting to:' + link);
    window.location.href="/?originalUrl=https%3A%2F%2Friptutorial.com%2Flink%3B%2520%2520%2520%2520%257D%257D)%253C%2Fcode">





                        
                        


                        
                            
                                Got any angular-material Question?
                                

                                
                                
                                    Ask any angular-material Questions and Get Instant Answers from ChatGPT AI:
                                    
                                
                                
                            
                        


                        
                        


                            
                                
                                
                                    PDF - Download angular-material for free
                                
                            
                        

                        
                        

                        
                             Previous
                             Next

angular-material

angular-material md-button Creating an icon button

Fastest Entity Framework Extensions

Example

Got any angular-material Question?