Comment changer la taille de l'icône md dans Material

Question

Cette question provient du Github de Material2. repo .

J'ai toujours des problèmes pour styliser un composant matériel qui est enveloppé dans un composant personnalisé.

J'ai un <logo> qui contient <md-icon svgIcon="logo"></md-icon>

En ajoutant :

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

Ne s'applique pas au composant matériel à l'intérieur de mon composant personnalisé.

Answer 1

Dans mon cas, cela fonctionne parfaitement. J'utilise le matériel le plus récent (6.2.0).

CSS :

.icon {
    font-size: 36px;
}

HTML :

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

L'essentiel est d'établir : [inline]="true"

De l'API :

@Input() inline : booléen - Indique si l'icône doit être inline, automatiquement l'icône en fonction de la taille de la police de l'élément. dans lequel l'icône est contenue.

Answer 2

MISE À JOUR : 2019-05-22

Les versions plus récentes de Material Design ont l'option de définir [inline]="true" comme une propriété de l'élément HTML.

Je vous recommande plutôt d'utiliser cette approche.

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

Lorsque vous utilisez cette option, l'icône hérite du conteneur parent !

GLHF ! :)

---

J'ai reçu quelques questions à ce sujet, alors je voulais juste donner un exemple plus clair de la façon de l'utiliser...

/* 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);
}

exemple d'utilisation

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

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

Answer 3

J'utilise

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

avec

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

pour redimensionner l'élément svg. C'était la seule solution qui fonctionnait pour moi, où 2 correspond à 200 % de la taille réelle (un redimensionnement à 0,5, par exemple, serait également possible).

La définition de "height" et "width" n'était pas une option pour moi, car l'élément svg rendu du composant mat-icon n'a pas d'attribut viewBox pour le moment. Mais l'attribut viewBox est obligatoire pour que le composant fonctionne avec les styles "height" et "width". Peut-être l'équipe d'Angular Material améliorera-t-elle cet aspect à l'avenir.

A titre d'information : Vous pouvez centrer la mat-icône avec un wrapper parent et des

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

Answer 4

Edit : Veuillez voir la réponse acceptée !

L'utiliser comme ça fonctionne très bien.

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

après avoir défini ceci dans les css du thème (pas dans le composant :host)

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

Answer 5

Essayez ça.

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

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