material2：适当更改 mat-mini-fab 大小和图标大小答案

【问题标题】：material2: properly changing of mat-mini-fab size and icon sizematerial2：适当更改 mat-mini-fab 大小和图标大小
【发布时间】：2018-12-11 17:36:27
【问题描述】：

抱歉，如果我重复了一个问题 - 没有找到有关我的问题的任何信息。

我正在使用 angular 6 和 material design。我需要更改按钮mat-fab-mini 的大小和其中的图标。在检查工具 html 以这种方式呈现：

要更改大小，我使用了以下代码，但它不会使按钮内的图标变小：

html

<button mat-mini-fab class="my-fab">
    <mat-icon aria-label="favorite">favorite</mat-icon>
</button>

scss

.my-fab {
    width: 20px;
    height: 20px;
    line-height: 16px;

    .mat-button-wrapper {
         padding: 2px 0 !important;
         line-height: 16px !important;
         width: 16px !important;
         height: 16px !important;

         .mat-icon {
              font-size: 16px;
              padding-right: 4px;
              line-height: 16px;
          }
    }
}

结果如下：

.mat-button-wrapper 的属性完全没有改变。图标位于按钮底部，图标大小没有改变。如何更改 material2 的图标大小以避免它？

【问题讨论】：

标签： angular sass material-design angular-material2

【解决方案1】：

好的，我找到了解决方案。在 Angular Material 2 组件中更改继承属性真的很困难。为此，在我的情况下，我应该按照here (already plused :D )

的回答

所以在我的代码中，我对 scss 进行了以下更改：

.my-fab {
     width: 20px;
     height: 20px;
     line-height: 14px;
     font-size: 14px;

     &::ng-deep .mat-button-wrapper{
         line-height: 14px;
         padding: 0;

          .mat-icon {
              font-size: 14px;
              padding-right: 4px;
              padding-top: 4px;
          }
    }
}

现在一切看起来都很棒。如果您知道更改mat-fab-mini 大小和其中图标的更好和正确的方法 - 在这里回答，如果它有效，我会将其标记为正确答案。否则我会在 2 天后将我的答案标记为正确。

【讨论】：

使用 ng-deep 不是最好的解决方案（弃用）
ng-deep 已被弃用，但目前没有设计替代品来实现预期目标 (angular.io/guide/component-styles)。这是引用：“不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng 的所有 3 个） -deep)。在此之前 ::ng-deep 应该是首选，因为它与工具的兼容性更广泛。”

【解决方案2】：

我成功了：

html

<button mat-mini-fab color="basic" class="button24">
  <mat-icon class="icon24">attach_file</mat-icon>
</button>

css

.button24 {
  background-color: #eee;
  width: 24px;
  height: 24px;
}
.icon24 {
  font-size: 16px;
  margin-top: -8px;
}

摩根大通

【讨论】：

【解决方案3】：

这个问题的根本原因是图标是一个内联元素。

所以调整图标大小最清晰的方法就是将其更改为块元素：

HTML

<button mat-raised-button>
  <mat-icon>create</mat-icon>
</button>

CSS

button {

      mat-icon {
        display: block;
        width: 128px;
        height: 128px;
        font-size: 128px;
        line-height: 128px;
      }
    }

【讨论】：

【解决方案4】：

根据我弄乱有角材质组件样式的经验，我可以说它们的样式是深度嵌套的，并且几乎所有时候层次结构都是这样的，无论您针对元素上的类编写什么代码，都不起作用。

但是，当涉及到图标时，有一个简单的解决方案。使用<i> 标签和有意义的材质类而不是<mat-icon>

<button mat-mini-fab class="my-fab">
  <i class="material-icons md-18" aria-label="favorite">favorite</i>
</button>

在上面的代码中，md-18 类将图标的字体大小定义为 18 像素。您还可以使用md-24、md-36 或md-48，它们都是材质框架中的预定义类。如果您想要自定义大小，可以使用 css 中的 my-fab 类定位按钮内的 <i> 标签，并更改其字体大小，如下所示

.my-fab i {
  font-size: 15px;
}

希望这会有所帮助！

【讨论】：

注意：md-18、md-24、md-36 和 md-48不包含在 Google 的 Material 图标中。您必须自己声明它们。
@rgantla，不幸的是它没有帮助。 span class="mat-button-wrapper" 总是覆盖 line-height 我提供的任何属性。我不知道如何解决。似乎这是span 由mat-mini-fab 创建的

【解决方案5】：

快速简单:)

<button mat-mini-fab color="primary" [ngStyle]="{transform: 'scale(0.8)'
              }">
   <mat-icon>cloud_download</mat-icon>
</button>

【讨论】：

【解决方案6】：

您可以尝试缩放 mat-mini-button 而不会弄乱字体和位置。请参阅下面的示例。

HTML

<button mat-mini-fab>
    <mat-icon>favorite</mat-icon>
</button>

CSS

button[mat-mini-fab] {
 transform: scale(0.7) !important;
}

【讨论】：

【解决方案7】：

为我工作

HTML

  <button mat-fab>
    <mat-icon class="md-36" inline aria-label="Home button">
      home
    </mat-icon>
  </button>
  <button mat-fab>
    <mat-icon class="md-48" inline aria-label="Up button">
      expand_less
    </mat-icon>
  </button>

CSS

.material-icons.md-18 {
  margin-top: -3px;
  font-size: 18px;
}
.material-icons.md-24 {
  margin-top: -3px;
  font-size: 24px;
}
.material-icons.md-36 {
  margin-top: -3px;
  font-size: 36px;
}
.material-icons.md-48 {
  margin-top: -4px;
  font-size: 48px;
}

图标正确居中，包装 div 不会溢出 fab/按钮我猜不太优雅

【讨论】：

【解决方案8】：

我在标题 (SCSS) 中使用较小的编辑按钮的解决方案：

h3 > button {
    width: 1.8rem !important;
    height: 1.8rem !important;
    line-height: 80% !important;

    .mat-button-wrapper {
        padding-top: 0.4rem !important;
        line-height: 80% !important;
    }

    .mat-icon {
        width: 80%;
        height: 80%;
        font-size: 80%;
    }
}

模板：

<h3>
    Title
    <button mat-mini-fab color="primary" class="ml-2" title="Edit" (click)="edit()">
        <mat-icon>edit</mat-icon>
    </button>
</h3>

【讨论】：

【解决方案9】：

似乎改变了按钮大小，我们改变了 1.button 大小 2. 图标包装器 span 和 3. 包含图标的大小。还可以在您的全局 style.scss 文件中创建一个 mixin，如下所示，以便它可以重复用于不同的大小。

@mixin change-button-size($btnsize,$fontsize) {
    height: $btnsize;
    width: $btnsize;
    line-height: $btnsize;
    span{
        height: $btnsize;
        padding: 0px !important;
        i{
            font-size: $fontsize;
        }
    }
}
.mat-mini-fab.mdb-30{
    @include change-button-size(30px, 15px);
}
.mat-mini-fab.mdb-40{
    @include change-button-size(40px, 20px);
}

【讨论】：

【解决方案10】：

对于带有文本的 mat fab 图标，我遇到了类似的问题。实际上有一个简单的解决方案没有使用已弃用的 ng deep

  .my-custom-fab-button {
        display: flex;
        align-items: center;
        justify-content: space-around;
   }

和图标

.mat-icon-button {
           line-height: 1;
                 }

如果您使用带有文本内容的 mat fab 图标（圆形按钮），那么您可以使用 like

.my-fabbutton-with-text {
    width: 50px;     //for the outline
    height: 50px;    // for the outline
    font-size: 14px; //for the text in icon
    display: flex;
    align-items: center;
    justify-content: space-around;
      }

希望对大家有所帮助

【讨论】：

您应该添加一个使用这些 CSS 规则的 html 示例以便更好地理解