Question

我正试图将播放箭头置于工厂快速拨号的中间，表盘和箭头都显示出来，但无论我尝试过什么（包括使用<i>并放置课程直接在md-icon）上，我无法将图标放大并位于制表盘的中心。

<md-fab-speed-dial>
    <md-fab-trigger>
        <md-button aria-label="Play" class="md-fab md-warn" layout-align="center center">
            <md-icon
                    class="md-48"
                    layout-align="center center"
                    >play_arrow</md-icon>
        </md-button>
    </md-fab-trigger>
    <md-fab-actions>
    </md-fab-actions>
</md-fab-speed-dial>

以下是我用凉亭安装的版本

{
    "name": "angular-material-starter",
    "description": "A starter project for AngularJS Material",
    "version": "0.0.2",
    "homepage": "https://github.com/angular/material-start",
    "license": "MIT",
    "private": true,
    "dependencies": {
      "angular": "^1.4.x",
      "angular-animate": "^1.4.x",
      "angular-aria": "^1.4.x",
      "angular-material": "^0.9.x",
      "angular-ui-router": "^0.2.x"
    },
    "devDependencies": {
      "angular-material": "~0.9.x"
    }
  }

这两个工厂以相同的方式编码，但具有不同的路线。

我已经尝试直接在开发者工具中摆弄css并且这有所帮助，但我觉得这不应该被要求。如何使图标大小为48并位于工厂的中心？

更新

奇怪的是，我把它放在了中心位置，看起来这至少部分是启动器app.css的一个问题，我删除了它的全部内容。

material-icons类显然需要添加到md-icon。

<md-fab-speed-dial>
    <md-fab-trigger>
        <md-button aria-label="Play" class="md-fab md-warn">
            <md-icon class="material-icons md-48">play_arrow</md-icon>
        </md-button>
    </md-fab-trigger>
    <md-fab-actions>
    </md-fab-actions>
</md-fab-speed-dial>

Answer 1

您可以访问此链接查看答案

https://github.com/angular/material/issues/2597

在我的情况下只需添加一个类set-icon-fab

.set-icon-fab {
    font-size: 1.8rem;
   }

我跑

如何在Angular Material Design中放大和居中字体图标？

1 个答案: