Comment changer la taille md-icon dans le matériel
cette question vient du matérial2 GitHub repo https://github.com/angular/material2/issues/4422#issuecomment-300309224
j'ai encore des problèmes de style pour un composant matériel qui est enveloppé dans un composant personnalisé.
j'ai un <logo> composant qui contient <md-icon svgIcon="logo"></md-icon>
ajout
:host {
.mat-icon {
width: 100px;
height: 100px;
font-size: 56px;
}
}
ne s'applique pas à l'élément matériel à l'intérieur de mon composant personnalisé
7 réponses
j'ai quelques questions à ce sujet, donc je voulais juste faire un plus clair exemple 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);
}
}
}
Dans mon cas, cela fonctionne parfaitement. Je utiliser le nouveau matériel (6.2.0)
CSS:
.icon {
font-size: 36px;
}
HTML:
<div class="icon">
<mat-icon [inline]="true">done</mat-icon>
</div>
La chose principale est de mettre: [inline]="true"
@Input() en ligne: boolean - Si l'icône doit être incorporé, calibrage automatique de l'icône pour correspondre à la taille de police de l'élément l'icône est contenue dans.
Essayez ceci.
@mixin md-icon-size($size: 24px) {
font-size: $size;
height: $size;
width: $size;
}
.material-icons.mat-icon {
@include md-icon-size(32px);
}
Edit: Veuillez voir la accepté de répondre!
Utiliser comme cela fonctionne bien.
<md-icon svgIcon="arrow-down" class="size-16"></md-icon>
lorsqu'on l'a défini dans le thème css (pas dans component :host)
md-icon.size-16 {
width: 16px;
height: 16px;
line-height: 16px;
}
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 représente 200% de la taille réelle (une réduction à 0,5 serait également possible).
définir "height" et" width " n'était pas une option pour moi, parce que 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 qu'il fonctionne avec le style "height" et "width". Peut-être L'équipe des matériaux angulaires améliorera cela à l'avenir.
comme note secondaire: Vous pouvez centrer l'icône de tapis avec un papier parent et
display: flex;
align-items: center;
justify-content: center;
je pense que le problème est causé par l'inclinaison du svg sans viewBox - empêchant toutes les tentatives de redimensionnement.
me semble que l'alternative est d'utiliser iconfont directement:
<i class="material-icons" style="font-size: 40px">face</i>
une autre option possible, si vous voulez avoir l'option d'ajuster les images à n'importe quelle taille de police jusqu'à un maximum (par exemple 300px), 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 voulez définir une taille minimale à générer dans le CSS compilé, changez simplement 1 ci-dessus à la taille minimum que vous souhaitez et de même, pour changer la valeur maximum, changer 300 à la valeur maximale que vous voulez.
C'est particulièrement pratique pour les icônes comme SVG, ils échelle à la taille que vous avez définie (bien que j'ai eu quelques difficultés à obtenir des icônes SVG tierce partie échelle pour s'adapter au conteneur, mais c'est un problème différent). Si vous êtes comme moi, vous avez souvent besoin d'avoir la majorité des icônes à une taille spécifique (par exemple, icônes de menu) avec certaines icônes étant plus grand (par exemple, éléments décoratifs). Cette boucle vous permet de tester les différentes tailles de police jusqu'à la taille à 1px incréments jusqu'à ce que vous trouver une taille qui fonctionne pour vous.
Qu'est-ce que cela faire?
lorsque votre SCSS est compilé en CSS, Il affichera une boucle avec les classes appropriées de 1 à 300.
comment l'utiliser?
pour utiliser, il suffit d'ajouter le .iconsize-[x] classe à votre mat-icon;
<mat-icon class="iconsize-45">show_chart</mat-icon>
cet exemple positionnera l'icône à 45px largeur et hauteur.