How to add triangle in drop down using angular-material

I am trying to create a drop-down using md-menu-bar and md-menu you can see in snapshots

using the code

<md-menu-bar>
   <md-menu>
     <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                    <img ng-src="https://media.licdn.com/mpr/mpr/p/5/005/098/12f/223c996.jpg" class="uilr-avatar">
                </md-button>
                <md-menu-content width="4">
                    <md-menu-item>
                        <md-button ng-click="ctrl.redial($event)">
                            <md-icon md-svg-icon="call:dialpad" md-menu-align-target></md-icon>
                            Redial
                        </md-button>
                    </md-menu-item>
                    <md-menu-item>
                        <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
                            <md-icon md-svg-icon="call:voicemail"></md-icon>
                            Check voicemail
                        </md-button>
                    </md-menu-item>
                    <md-menu-divider></md-menu-divider>
                    <md-menu-item>
                        <md-button ng-click="ctrl.toggleNotifications()">
                            <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
                            {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
                        </md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu>
        </md-menu-bar>

but I want this drop down with a triangle at top please check the snapshots taking from inbox.google.com

please tell how can I achieve this. Thanks in advance