재료에서 매트 아이콘 크기를 변경하는 방법

재료에서 매트 아이콘 크기를 변경하는 방법

이 질문은 Material2 Github repo에서 나온 것입니다.

사용자 지정 구성요소에 포장된 재료 구성요소를 스타일화하는 데 아직 문제가 있습니다.

나는 있습니다<logo>포함하는 구성 요소<md-icon svgIcon="logo"></md-icon>

추가:

:host { 
   .mat-icon {
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}

사용자 지정 구성 요소 내의 재료 구성 요소에는 적용되지 않습니다.

저 같은 경우에는, 이것이 완벽하게 작동합니다.최신 재료 사용(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 - 아이콘을 인라인으로 표시할지 여부를 지정합니다. 아이콘이 포함된 요소의 글꼴 크기와 일치하도록 아이콘 크기를 자동으로 조정합니다.

업데이트: 2019-05-22

재료 설계의 최신 버전에는 설정 옵션이 있습니다.[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);
    }
  }
}

사용 중

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

와 함께

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

svg 요소의 크기를 조정합니다.2가 실제 크기의 200%에 해당하는 유일한 솔루션이었습니다(예: 0.5로 축소하는 것도 가능).

mat-icon 구성 요소의 렌더링된 svg 요소에 현재 viewBox 특성이 없기 때문에 "높이"와 "폭"을 설정하는 것은 저에게 옵션이 아니었습니다.그러나 viewBox 특성은 "높이" 및 "폭" 스타일로 작동하려면 필수입니다.아마도 Angular Material 팀이 미래에 그것을 개선할 것입니다.

참고로 다음과 같습니다.매트 아이콘 가운데에 상위 래퍼를 배치할 수 있습니다.

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

편집: 승인된 답변을 참조하십시오!

이렇게 사용하는 것이 좋습니다.

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

테마 CSS에서 이를 정의한 경우(구성 요소:host가 아님)

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

아이콘이 빌드 내 컨테이너(내)의 가운데에 있도록 합니다.<mat-icon>구성 요소) 크기를 조정한 후 이 솔루션을 사용합니다.포장지 상자도 필요하지 않습니다.inline=true소유물.

HTML

<mat-icon class="big">error_outline</mat-icon>

CSS

.big {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}

참고: 다른 장치(예: px 또는 em)도 사용할 수 있습니다.

이거 먹어봐요.

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

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

이 문제는 viewBox 없이 svg를 인라인화하여 모든 크기 조정 시도를 방지함으로써 발생한 것으로 생각합니다.

내가 보기에 대안은 아이콘 폰트를 직접 사용하는 것 같습니다.

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

나를 위해 일했습니다.

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

아이콘이 제대로 중앙에 있고 래퍼 디브가 팹/버튼을 넘치지 않습니다. 너무 우아하지 않은 것 같습니다.

다른 가능한 옵션 중 하나는 이미지를 최대 글꼴 크기(예: 300px)까지 확장하는 옵션을 원하는 경우 다음과 같은 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당신이 원하는 최대치까지.

이것은 SVG이기 때문에 아이콘이 사용자가 설정한 크기로 확장되는 데 특히 유용합니다(타사 SVG 아이콘을 컨테이너에 맞게 조정하는 데 어려움을 겪었지만 다른 문제입니다).저와 같은 경우에는 대부분의 아이콘이 특정 크기(예: 메뉴 아이콘)로 표시되고 일부 아이콘은 더 커야 합니다(예: 장식 요소).이 루프를 사용하면 사용자에게 적합한 크기를 찾을 때까지 모든 크기의 글꼴을 1px 증분으로 쉽게 테스트할 수 있습니다.

이것은 무엇을 합니까?

SCSS가 CSS로 컴파일되면 1부터 300까지의 관련 클래스를 가진 루프를 출력합니다.

어떻게 사용하나요?

사용하려면 다음을 추가합니다..iconsize-[x]의 에대스에 .mat-icon;

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

이 예에서는 아이콘의 너비와 높이를 45px로 설정합니다.

가장 간단한 방법은 (추가 CSS 없이) 다음과 같습니다.

    <sup><mat-icon inline="true">info</mat-icon></sup>
<small><mat-icon inline="true">info</mat-icon></small>
<big><mat-icon inline="true">info</mat-icon></big>

에 하시기 바랍니다.inline="true" 태그의 의▁which.

[ngStyle] 지침을 사용하는 대체 솔루션.

mat-icon도 한 수 .ngStyle에 대한 .mat-icon구성 요소:

<mat-icon [ngStyle]="{ 'width.px': 64, 'width.px': 64 'font-size.px': 64 }">build</mat-icon>

또는 구성 요소에서 크기를 정의할 때:

this.size = 64;

다음과 같은 경우:

<mat-icon [ngStyle]="{ 'width.px': size, 'width.px': size 'font-size.px': size }">build</mat-icon>

은 이솔은인스추타을때작가다니동합에 인라인 하는 것이기 합니다.mat-icon호스트 구성 요소를 직접 확인합니다.

위의 솔루션을 사용자 지정 지침으로 포장합니다.

애플리케이션에서 싸이징을 여러 번 재사용하려는 경우 위에서 언급한 솔루션을 지침으로 쉽게 묶을 수 있습니다.

import { Directive, HostBinding, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appIconSize]',
})
export class IconSizeDirective {

  @HostBinding('style.width') @HostBinding('style.height') @HostBinding('style.font-size') @Input('appIconSize') public size: string;
    
}

다음과 같은 경우:

<mat-icon appIconSize="64px">build</mat-icon>

---

다음 StackBlitz에서 두 솔루션의 작동 예를 확인하십시오.

Angular Material 버전 13.3.9를 사용하고 있습니다.

저의 경우, 버튼과 아이콘 모두 CSS가 필요했습니다.

.add-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
}

.mat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
}

<button mat-mini-fab class="add-button-container" color="primary"
                                            aria-label="icon button with an add icon">
                                            <mat-icon>add</mat-icon>
                                        </button>

언급URL : https://stackoverflow.com/questions/43887701/how-to-change-mat-icon-size-in-material