web-dev-qa-db-fra.com

Changer la taille des icônes des matériaux AngularJS

J'ai référencé puis déclaré une icône

<i class="material-icons">face</i>

Mais comment puis-je changer la taille de l'icône?

Sur le site officiel https://design.google.com/icons/ Je peux les voir utiliser des classes comme class="md-icon dp48" mais cela ne fonctionne pas dans mon cas.

cssiconsmaterial-design
39
sreginogemoh

En lisant la conception du matériel dans github, j'ai trouvé ces informations utiles qui pourraient vous aider.

 /* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

À partir du code ci-dessus, vous pouvez simplement modifier ou remplacer les icônes CSS de matériel.

Exemple de code:

<i class="material-icons md-18">face</i>

Plus de détails ici

70
claudios

Si je fais un travail ponctuel, j'ajoute généralement un style = modification à la taille de la police dans la balise. Mais oui, en bref, il n’ya pas de véritable astuce, à part définir vos propres styles de taille à attacher dans les CSS comme solution permanente.

<i class="material-icons" style="font-size: 50px">insert_invitation</i>
23
user1670304

si vous utilisez scss

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

.md-icon-16 {
  @include md-icon-size(16px);
}

.md-icon-18 {
  @include md-icon-size(18px);
}

.md-icon-24 {
  @include md-icon-size(24px);
}

.md-icon-36 {
  @include md-icon-size(36px);
}
5
Kuncevič

Le meilleur moyen de changer la taille d'une icône Materialize consiste à ajouter un modificateur à la classe i:

<i class="material-icons small">menu</i>
<i class="material-icons medium">menu</i>
<i class="material-icons large">menu</i>

Vous trouverez plus d'informations sur la modification de la taille des icônes sur le site Materialize sous icônes.

2
M.A.Williams

Vous pouvez utiliser le css normal, mais vous devez remplacer le style en ligne par:

font-size: 50px !important;

1
Patryk Ties

vous pouvez changer la propriété font-size, cela reflètera l'icône car c'est une "icone de police"

0
Ahmad Mayo

Parfois, définir la taille de la police ne réduira pas la taille de l'icône. Coz, la taille de police recommandée est 18, 24, 36 ou 48px.

Essayez de définir les attributs "height", "width", "line-height" pour cette icône particulière. Cela pourrait aider.

0
Jagann

Un attribut de taille est associé à une balise icon comme check_circle.

donc en utilisant l'attribut size, nous pouvons changer la taille des icônes.

0
prat_bhan