Slightly moved elements using angular material - angularjs

Question

I have added angular-material to my meanjs project and was playing with styling first elements. I also made sure every other styles were removed from that project.. so only default angular styles are being loaded.
Now, for example, I created a md-menu in a md-toolbar using this code here:
<md-menu md-position-mode="target-right target">
<md-button aria-label="Open profile actions" ng-click="openMenu($mdOpenMenu, $event)" md-menu-origin>
<img alt="{{authentication.user.displayName}}" class="header-profile-image" data-ng-src="{{authentication.user.profileImageURL}}"/>
<span data-ng-bind="authentication.user.displayName"></span>
</md-button>
<md-menu-content width="4">
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.profile">
<ng-md-icon icon="account_circle"></ng-md-icon>
<span md-menu-align-target>Edit Profile</span>
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.picture">
<ng-md-icon icon="photo" md-menu-align-target></ng-md-icon>
Change Profile Picture
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active" data-ng-show="authentication.user.provider === 'local'">
<md-button data-ui-sref="settings.password">
<ng-md-icon icon="lock" md-menu-align-target></ng-md-icon>
Change Password
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.accounts">
<ng-md-icon icon="share" md-menu-align-target></ng-md-icon>
Manage Social Accounts
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item data-ui-sref-active="active">
<md-button href="/api/auth/signout" target="_self">
<ng-md-icon icon="logout" md-menu-align-target></ng-md-icon>
Signout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
However this results in a menu with mispositioned texts and icons, even if I delete the icons. They should be vertically centered like you can see here:
https://material.angularjs.org/HEAD/#/demo/material.components.menu
Same problem came up creating a menu icon like this:
<md-button aria-label="Open the sidebar" class="md-icon-button menu" ng-click="toggleSideNav()">
<ng-md-icon icon="menu" style="fill: #fff;" md-menu-align-target></ng-md-icon>
</md-button>
Which results in this here
However.. it's no problem for me to solve this with some css rules.. but I guess the problem must be somewhere else? anybody has an idea? I checked the angular-material documentation a thousand times and can't figure out what's wrong.
thanks!

Answer 1

It's because you're mixing Angular Material with Angular Material Icons (ng-md-icon), two different projects, but the ng-md-icon guys have patched their library to run alongside Angular Material, but you have to use the Angular Material directive md-icon like so:
Instead of:
<ng-md-icon icon="account_circle"></ng-md-icon>
You would use:
<md-icon ng-md-icon icon="account_circle"></md-icon>