Как изменить размер md-значка в материале

Ответ 1

ОБНОВЛЕНИЕ: 2019-05-22

В более новых версиях Material Design есть возможность установить [inline]="true" в качестве свойства элемента HTML.

Я бы рекомендовал использовать этот подход вместо этого.

<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>

При использовании этого значок будет наследоваться от родительского контейнера!

GLHF! :)

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

/* 1. Add this mixin to a "global" scss */

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
  line-height: $size;
}

/* 2. Then use it like this in you component scss */

mat-icon {
  @include md-icon-size(32px);
}

пример использования

<mat-icon class="myIcon" svgIcon="search"></mat-icon>

:host {
  .myIcon {
    &mat-icon {
      @include md-icon-size(32px);
    }
  }
}

Ответ 2

В моем случае это работает отлично. Я использую новейший материал (6.2.0)

CSS:

.icon {
    font-size: 36px;
}

HTML:

  <div class="icon">
    <mat-icon [inline]="true">done</mat-icon>
  </div>

Главное установить: [inline]="true"

Из API:

@Input() inline: boolean - должен ли значок быть встроенным, автоматически изменяя размер значка в соответствии с размером шрифта элемента, в котором содержится значок.

Ответ 3

я использую

<mat-icon svgIcon="cellphone-link"></mat-icon>

с

.mat-icon {
    transform: scale(2);
}

для изменения размера элемента SVG. Это было единственное рабочее решение для меня, где 2 - это 200% фактического размера (возможно также сокращение до 0,5).

Установка "height" и "width" не была для меня опцией, потому что визуализированный элемент svg компонента mat-icon в данный момент не имеет атрибута viewBox. Но атрибут viewBox является обязательным, чтобы он работал со стилями "height" и "width". Возможно, команда Angular Material улучшит это в будущем.

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

display: flex;
align-items: center;
justify-content: center;

Ответ 4

Изменить: см. принятый ответ!

Использование этого как это работает отлично.

<md-icon svgIcon="arrow-down" class="size-16"></md-icon>

определив это в теме css (не в компоненте: host)

md-icon.size-16 {
  width: 16px;
  height: 16px;
  line-height: 16px;
}

Ответ 5

Попробуйте это.

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
}

.material-icons.mat-icon {
  @include md-icon-size(32px);
}

Ответ 6

Я думаю, проблема связана с вложением svg без viewBox - предотвращение всех попыток изменения размера.

Мне кажется, что альтернатива использует iconfont напрямую:

<i class="material-icons" style="font-size: 40px">face</i>

Ответ 7

Еще одна возможная опция, если вы хотите иметь возможность масштабировать изображения до любого размера шрифта до максимума (например, 300 пикселей), будет работать следующий цикл scss;

@for $i from 1 through 300{
  .iconsize-#{$i}{
    font-size: $i+unquote('px') !important;
    height: $i+unquote('px') !important;
    width: $i+unquote('px') !important;
  };
}

Если вы хотите установить минимальный размер для сгенерированного в скомпилированном CSS, просто измените 1 выше на минимальный размер, который вам нужен, и аналогичным образом, чтобы изменить максимальное значение, измените 300 на любое максимальное значение, которое вы 'd like.

Это особенно удобно для значков как SVG, они будут масштабироваться до установленного вами размера (хотя у меня были проблемы с масштабированием значков SVG сторонних производителей, чтобы соответствовать контейнеру, но это другая проблема). Если вы похожи на меня, вам часто приходится иметь большинство значков определенного размера (например, значки меню), причем некоторые значки больше (например, декоративные элементы). Этот цикл позволяет вам легко тестировать шрифты разных размеров до любого размера с шагом 1px, пока не найдете размер, который вам подходит.

Что это делает?

Когда ваш SCSS скомпилирован в CSS, он выведет цикл с соответствующими классами от 1 до 300.

Как его использовать?

Чтобы использовать, просто добавьте класс .iconsize-[x] к mat-icon;

<mat-icon class="iconsize-45">show_chart</mat-icon>

В этом примере значок будет иметь ширину и высоту 45 пикселей.

Ответ 8

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

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