title: How to change md fab speed dial to show on click? Angular material
body: <p>How to change md-fab-speed-dial to open and activate the speed dial menu with click, not hover.
  And how can i remove that whitespace (on the picture)?</p>
  
  <p>Here is view</p>
  
  <pre><code>md-fab-speed-dial md-open="demo.isOpen" md-direction="{{ demo.selectedDirection }}"  ng-class="demo.selectedMode"
      md-fab-trigger.actions-icon-menu
        md-button.md-icon-button aria-label="menu"
          md-icon.more-icon md-svg-src="#{asset_path('icons/more_icon.svg')}"
      md-fab-actions.actions-menu
        section.actions_icons layout="row" layout-align="center center"
          md-button.md-primary aria-label="edit icon"
            md-icon md-svg-src="#{asset_path('actions_icons/edit.svg')}"
          md-button.md-primary aria-label="remove icon"
            md-icon md-svg-src="#{asset_path('actions_icons/remove.svg')}"
          md-button.md-primary aria-label="download icon"
            md-icon md-svg-src="#{asset_path('actions_icons/download.svg')}"
          md-button.md-primary aria-label="print icon"
            md-icon md-svg-src="#{asset_path('actions_icons/print.svg')}"
          md-button.md-primary aria-label="mail icon"
            md-icon md-svg-src="#{asset_path('actions_icons/mail.svg')}"
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>function ($scope, $mdSidenav, $mdUtil, $location, Invoice) {
  
        $scope.demo = {
          topDirections: ['left', 'up'],
          bottomDirections: ['down', 'right'],
  
          isOpen: false,
  
          availableModes: ['md-fling', 'md-scale'],
          selectedMode: 'md-fling',
  
          availableDirections: ['up', 'down', 'left', 'right'],
          selectedDirection: 'left'
        };
      }]);
  </code></pre>