web-dev-qa-db-fra.com

Comment changer la taille de md-icon dans Matériau

Cette question provient de material2 github repo https://github.com/angular/material2/issues/4422#issuecomment-300309224

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

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

ajouter 

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

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

angularangular-material
29
Mackelito

On me pose des questions à ce sujet, alors je voulais simplement donner un exemple plus clair de son utilisation ...

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

Dans mon cas, cela fonctionne parfaitement. J'utilise du matériel 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 de définir: [inline]="true"

De l'API :

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

22
Mariusz.v7

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 de travail pour moi, où 2 correspond à 200% de la taille réelle (une réduction à 0,5 par exemple serait également possible).

Définir "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 le faire fonctionner avec les styles "height" et "width". Peut-être que l'équipe de Angular Material améliorera cela à l'avenir.

Remarque: : Vous pouvez centrer l’icône du masque avec un wrapper parent et 

display: flex;
align-items: center;
justify-content: center;
9
Pierre Chavaroche

Edit: S'il vous plaît voir la réponse acceptée!

L'utiliser comme ceci fonctionne très bien.

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

après avoir défini ceci dans le thème css (pas dans le composant: hôte)

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

Essaye ça.

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

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

Je pense que le problème est causé par l'inline le svg sans viewBox - empêchant toute tentative de redimensionnement 

Il me semble que l’alternative utilise directement iconfont:

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

Une autre option possible, si vous souhaitez avoir la possibilité de redimensionner les images avec n’importe quelle taille de police jusqu’à un maximum (par exemple 300 px), la boucle scss suivante fonctionnerait;

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

Si vous souhaitez définir une taille minimale à générer dans le CSS compilé, modifiez simplement 1 au-dessus de la taille minimale souhaitée. De même, pour modifier la valeur maximale, remplacez 300 par la valeur maximale souhaitée.

Ceci est particulièrement utile pour les icônes en tant que SVG, elles s’adapteront à la taille que vous avez définie (bien que j’ai eu du mal à obtenir une mise à l’échelle des icônes SVG tierces pour s’adapter au conteneur, mais c’est un problème différent). Si vous êtes comme moi, la plupart des icônes doivent souvent avoir une taille spécifique (icônes de menu, par exemple), certaines icônes étant plus grandes (éléments décoratifs, par exemple). Cette boucle vous permet de tester facilement différentes tailles de police, quelle que soit leur taille, par incréments de 1 px, jusqu'à ce que vous trouviez une taille qui vous convient.

Qu'est-ce que cela fait?

Lorsque votre SCSS est compilé en CSS, il génère une boucle avec les classes pertinentes de 1 à 300.

Comment puis-je l'utiliser?

Pour l'utiliser, ajoutez simplement la classe .iconsize-[x] à votre mat-icon;

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

Cet exemple définira l'icône sur une largeur et une hauteur de 45px.

0
Scott Pritchard