Slightly moved elements using angular material

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>