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

Question

Извините, если я продублировал вопрос - не нашел информации о моей проблеме.

Я использую угловой 6 с материальным дизайном . Мне нужно изменить размер кнопки mat-fab-mini и значок внутри нее. При проверке инструмента html представлен таким образом:

Чтобы изменить размер, я использовал следующий код, но он не уменьшил размер значка внутри кнопки:

HTML

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

1020 * СКС *

.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 не меняются вообще. Значок находится внизу кнопки, и размер значка не изменился. Как я могу изменить размер иконки на материале 2, чтобы избежать этого?

Answer 1

работал для меня

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 оболочки не переполняет кнопку / кнопку Не слишком элегантно, я думаю

Answer 2

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

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

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

Answer 3

Хорошо, я нашел решение. Действительно трудно изменить наследуемые свойства в угловых материалах 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 дня.

Answer 4

Мне это удалось:

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

Answer 5

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

Однако, когда дело доходит до значков, есть простое решение. Используйте тег <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;
}

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