Немного перемещенные элементы с использованием углового материала

Question

Я добавил угловой материал к моему проекту meanjs и играл с укладкой первых элементов. Я также убедился, что все остальные стили были удалены из этого проекта .. поэтому загружаются только по умолчанию угловые стили.

Сейчас, к примеру, я создал мкр-меню в мкр-панели, используя этот код здесь:

<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> 

Однако это приводит к меню с mispositioned текстов и значков, даже если удалить значки , Они должны быть выровнены по вертикали, как вы можете увидеть здесь: https://material.angularjs.org/HEAD/#/demo/material.components.menu

Такая же проблема придумал создать значок меню, как это:

<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> 

что приводит это здесь

Однако .. для меня не проблема решить это с помощью некоторых правил css .. но я думаю, проблема должна быть где-то еще? У кого-нибудь есть идея? Я проверил документацию углового материала тысячу раз и не могу понять, что случилось.

спасибо!

Answer 1

Это связано с тем, что вы смешиваете угловой материал с иконками углового материала (ng-md-icon), два разных проекта, но ребята ng-md-icon исправили свою библиотеку, чтобы работать вместе с угловым материалом, но вы должны использовать директиву Угловая Материал md-icon следующим образом:

Вместо:

<ng-md-icon icon="account_circle"></ng-md-icon> 

Вы могли бы использовать:

<md-icon ng-md-icon icon="account_circle"></md-icon>