Comment changer la taille de l'icône de tapis sur un matériau angulaire?

Question

La balise mat-icon du matériau angulaire a toujours une taille par défaut de 24 pixels. Alors, comment le changer ... ???

 .mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}

Answer 1

font-size a tendance à perturber la position. Je fais quelque chose comme:

 <mat-icon class="icon-display">home</mat-icon>

CSS:

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

Où le 2 peut en fait être n'importe quel nombre. 2 double la taille d'origine.

Answer 2

Étant donné que le matériau angulaire utilise la famille de polices «Icônes de matériau », la taille de l'icône dépend de la taille de la police .

Par conséquent, si vous souhaitez modifier la taille de l'icône, vous modifiez sa taille de police dans votre fichier CSS.

Par example,

 .mat-icon {
  font-size: 50px;
}

Answer 3

Afin de bien envelopper la police en dehors de la définition de la taille de la police, vous devez également ajuster la largeur:

 .mat-icon {
  font-size: 50px;
  width: 50px;
}

Answer 4

Vous devez également modifier la largeur et la hauteur pour que le conteneur corresponde à la taille de la police.

Selon votre cas d'utilisation, une bonne fonctionnalité de l'icône mat est une entrée booléenne de [inline], définissez ceci sur true et il sera automatiquement dimensionné en fonction de l'élément dans lequel il est contenu.

Answer 5

Créez le nom de la classe correspondant à la fonction réelle. Il devient plus facile à retenir, à utiliser et à étendre.

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

.icon-3x {
    transform: scale(3);
}