web-dev-qa-db-fra.com

Modifier la taille du fichier SVG dans Angular Material 2 <mat-icon> à l'aide de Vanilla CSS ou HTML

Comment modifier la taille d'une icône SVG dans Angular 2+ Material Design à l'aide de Vanilla CSS, HTML ou JS? 

Si je spécifie l'icône à l'intérieur de l'élément HTML, le style fonctionne bien:

<mat-icon style="font-size: 16px !important">home</mat-icon>

Cependant, lorsque j'utilise l'attribut svgIcon (par exemple, si vous utilisez une bibliothèque d'icônes tierce), l'icône ne peut pas être redimensionnée:

<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>

Je suis conscient que les SVG sont plus compliqués à mettre à l'échelle et je pourrais utiliser l'attribut viewBox. Cependant, je ne peux même pas accéder à l'élément enfant <svg> à l'intérieur de <mat-icon> pour effectuer un piratage JS laid. Existe-t-il un moyen simple de le faire avec Vanilla CSS? Ou même un bidouillage laid sur le composant angulaire?

Extra info: J'utilise la bibliothèque d'icônes mdi.svg de https://materialdesignicons.com pour obtenir des icônes supplémentaires pour mon projet Angular. Pour les utiliser, cependant, je dois utiliser l'attribut svgIcon.

angularsvgiconsangular-material2
7
Gerardo Figueroa

Il semble que les styles de bibliothèque remplacent votre déclaration en ligne css. Essayez peut-être d'ajouter la déclaration !important à votre style: style="font-size: 16 !important" ou comme vous n'avez pas fourni plus de code, essayez d'inspecter ce nœud d'icône pour vérifier quel style définit la taille de la police. 

Vérifiez également ici

METTRE &AGRAVE; JOUR:

Voici une autre solution éventuellement efficace. Ajoutez le style transform: scale(2); pour l'élément svg que vous souhaitez redimensionner, où 2 correspond à 200% de la taille réelle (vous pouvez bien entendu aussi les réduire en utilisant, par exemple, la valeur 0.5 pour 50%). Voici un exemple de travail pour le site Web avec vos icônes et lien vers la documentation :

.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}
8
mpro

J'ai joué avec ça pendant trop longtemps.

J'ai une série d'icônes que je souhaite redimensionner pour correspondre à différentes tailles de mat-icon, mais chaque icône nécessite une échelle différente, de sorte qu'elles apparaissent équilibrées par rapport aux autres icônes - ce qui augmente effectivement la taille de la viewBox.

Au final, cela a assez bien fonctionné:

mat-icon
{
    width: 50px;
    height: 50px;

    display: flex;
    flex-shrink: 0;
    justify-content: center;

    outline: 1px dashed red;  // for testing    

    & ::ng-deep svg
    {
        align-self: center;
    }

    &.shrink-90 ::ng-deep svg
    {
        width: 90%;
        height: 90%;
    }

    &.shrink-80 ::ng-deep svg
    {
        width: 80%;
        height: 80%;
    }
}

Puis je crée le mat-icon avec ceci, où iconCss='shrink-80'

   <mat-icon svgIcon="{{ feature.name }}" [ngClass]="feature.iconCss"></mat-icon>

Le mat-icon lui-même peut être mis à l'échelle avec toutes les classes supplémentaires souhaitées (comme vous le feriez pour une icône normale). Ensuite, le «rétrécissement» ajuste la taille dans la boîte.

2
Simon_Weaver

En prenant @mpro solution, j’ai fait quelques changements qui fonctionnent mieux pour moi (j’ai des icônes personnalisées, alors c’est peut-être pour cela):

mat-icon[size="2"]{
  width: 48px;
  height: 48px;
}

mat-icon[size="2"] svg{
  transform: scale(2);
  transform-Origin: left top;
}

ou la solution scss:

@mixin iconSize($size){
  &[size="#{$size}"]{
    width: 24px*$size;
    height: 24px*$size;

    svg{
      transform: scale($size);
      transform-Origin: left top;
    }
  }
}
1
subarroca

Dans le matériau angulaire 2, vous pouvez utiliser la propriété [inline] = "true" dans l'élément. Selon la documentation "Indiquez si l'icône doit être en ligne, adaptez-la automatiquement à la taille de police de l'élément qui la contient". Ainsi, si votre icône de tapis se trouve à l'intérieur d'un élément div, vous pouvez définir le style de police dans l'élément div, qui sera hérité par l'icône de tapis.

<div class="parent" style="font-size:2em"> <mat-icon>play_arrow</mat-icon> </div>
0
Abhilash

Voici comment je change la taille de mat-icon dans @angular/material26.0.0

Bien que, dans cette méthode, seule l’icône SVG change sa taille, si vous utilisez mat-icon-button. Ajustez simplement la taille de mat-icon button si votre nouvelle taille est trop grande. Vous n'avez pas besoin de penser à cela si c'est mat-icon. 

.mat-icon {
   font-size: /* your size here */;
}
0
Vadamadafaka