Material2: правильное изменение размера mat-mini-fab и размера значка

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

Однако, что касается иконок, есть простое решение. Используйте тег <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, которые являются предопределенными классами в структуре материалов. Если вам нужен нестандартный размер, вы можете настроить таргетинг на тег <i> внутри вашей кнопки с помощью класса my-fab в css и изменить его размер шрифта, как показано ниже.

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

надеюсь это поможет!

Хорошо, я нашел решение. Очень сложно изменить свойства наследования в компонентах angular material 2. Для этого в моей ситуации я должен сделать, как ответил здесь (уже плюсовал: 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 дня.

У меня получилось так:

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

JPM

Основная причина этой проблемы в том, что значок является встроенным элементом.

Итак, самый простой способ изменить размер значка - превратить его в блочный элемент:

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

Работал на меня

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 / button Думаю, не слишком элегантно

Мое решение использовать меньшую кнопку редактирования в заголовках (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>

похоже, чтобы изменить размер кнопки, мы изменили 1. размер кнопки 2. диапазон, который является оболочкой для значка и 3. размер включенного значка. Также создайте миксин в вашем глобальном файле style.scss, как показано ниже, чтобы его можно было повторно использовать для разных размеров.

@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);
}