Question

我正在使用angular-material在angularjs 1.5.0中编写我的网站的客户端。

我想要一个打开弹出菜单的按钮。我一直有的问题是图标看起来很小，我不知道如何增加它的大小。

这是$ mdIconProvider配置：

app.config(function($mdIconProvider) {
    // Configure URLs for icons specified by [set:]id.
    $mdIconProvider
        .icon('menu', 'svg/menu.svg');
});

这是菜单图标和弹出菜单的代码：

<md-menu id="mainmenu" md-position-mode="target-right target">
<md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
    <md-icon md-menu-origin md-svg-icon="menu"></md-icon>
</md-button>
<md-menu-content width="4">
    <md-menu-item>
       <md-button ng-click="changePage('/')">
            <div layout="row">
                <p flex>Home</p>
                <md-icon md-menu-align-target md-svg-icon="svg/home.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
        </md-menu-item>
            <md-menu-item ng-show="!isAuthenticated()">
       <md-button ng-click="changePage('/login')">
            <div layout="row">
                <p flex>Login</p>
                <md-icon md-menu-align-target md-svg-icon="svg/home.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
        </md-menu-item>

      <md-menu-item ng-show="isAuthenticated()">
        <md-button ng-click="changePage('inventory')">
            <div layout="row">
                <p flex>Inventory</p>
                <md-icon md-menu-align-target md-svg-icon="svg/inventory.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
    </md-menu-item>
      <md-menu-item ng-show="isAuthenticated()">
        <md-button ng-click="changePage('add-drink')">
            <div layout="row">
                <p flex>Ad Drink</p>
                <md-icon md-menu-align-target md-svg-icon="svg/add_drink.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
          </md-menu-item>
    <md-menu-item ng-show="isAuthenticated()">
        <md-button ng-click="changePage('add-cocktail')">
            <div layout="row">
                <p flex>Add Cocktail</p>
                <md-icon md-menu-align-target md-svg-icon="svg/add_cocktail.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
    </md-menu-item>
                 <md-menu-item ng-show="isUserGroupAllowed(1)">
        <md-button ng-click="changePage('admin-generic-drinks')">
            <div layout="row">
                <p flex>Admin Generic Drinks</p>
                <md-icon md-menu-align-target md-svg-icon="svg/admin_cocktails.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
                     </md-menu-item>
    <md-menu-item ng-show="isUserGroupIdAllowed(1)">
        <md-button ng-click="changePage('admin-drinks')">
            <div layout="row">
                <p flex>Admin Drinks</p>
                <md-icon md-menu-align-target md-svg-icon="svg/admin_cocktails.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
    </md-menu-item>
         <md-menu-item ng-show="isUserGroupIdAllowed(1)">
        <md-button ng-click="changePage('admin-cocktails')">
            <div layout="row">
                <p flex>Admin Cocktails</p>
                <md-icon md-menu-align-target md-svg-icon="svg/admin_cocktails.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
    </md-menu-item>
     <md-menu-item ng-show="isUserGroupIdAllowed(1)">
        <md-button ng-click="changePage('admin-glasses')">
            <div layout="row">
                <p flex>Admin Glasses</p>
                <md-icon md-menu-align-target md-svg-icon="svg/admin_cocktails.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
    </md-menu-item>
     <md-menu-item ng-show="isUserGroupIdAllowed(1)">
        <md-button ng-click="changePage('admin-pending-images')">
            <div layout="row">
                <p flex>Admin Pending Images</p>
                <md-icon md-menu-align-target md-svg-icon="svg/admin_pending_images.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
    </md-menu-item>
    <md-menu-item ng-show="isAuthenticated()">
        <md-button ng-click="changePage('logout')">
            <div layout="row">
                <p flex>Logout</p>
                <md-icon md-menu-align-target md-svg-icon="svg/logout.svg" style="margin: auto 3px auto 0;"></md-icon>
            </div>
        </md-button>
    </md-menu-item>
</md-menu-content>
</md-menu>

所以....我如何增加md-icon的大小？

Answer 1

您需要在css或apply this setting或this

中提供高度和宽度

Answer 2

我相信内置的md-xx类允许你调整图标大小，例如md-48。

有关详细信息，请参阅此issue

在md-menu中增加md-icon大小

2 个答案: