it-swarm.com.de

Ändern Sie die SVG-Größe in Angular Material 2 <mat-icon> mit Vanilla CSS oder HTML

Wie ändere ich die Größe eines SVG-Symbols in Angular 2+ Material Design mit Vanilla CSS, HTML oder JS

Wenn ich das Symbol innerhalb des HTML-Elements angeben, funktioniert das Styling gut:

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

Wenn ich jedoch das svgIcon-Attribut verwende (beispielsweise wenn Sie eine Symbolbibliothek eines Drittanbieters verwenden), kann die Größe des Symbols nicht geändert werden:

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

Mir ist bekannt, dass SVGs komplizierter zu skalieren sind, und ich könnte das viewBox-Attribut verwenden. Ich kann jedoch nicht einmal auf das <svg>-untergeordnete Element in <mat-icon> zugreifen, um einen hässlichen JS-Hack auszuführen. Gibt es einen einfachen Weg mit Vanilla CSS? Oder sogar ein hässlicher Hack auf die Angular-Komponente?

Zusätzliche Informationen: Ich verwende die mdi.svg-Symbolbibliothek von https://materialdesignicons.com , um weitere Symbole für mein Angular-Projekt zu erhalten. Um diese verwenden zu können, muss ich jedoch das svgIcon-Attribut verwenden.

7

Es scheint, dass Bibliotheksstile Ihre CSS-Inline-Deklaration überschreiben. Versuchen Sie möglicherweise, die !important-Deklaration zu Ihrem Stil hinzuzufügen: style="font-size: 16 !important" oder da Sie keinen weiteren Code angegeben haben, versuchen Sie, diesen Symbolknoten zu überprüfen, um festzustellen, welcher Stil die Schriftgröße definiert. 

Überprüfen Sie auch hier

UPDATE:

Hier ist eine andere möglicherweise funktionierende Lösung. Fügen Sie transform: scale(2); style für das svg-Element hinzu, dessen Größe Sie ändern möchten, wobei 2 200% der tatsächlichen Größe ist (natürlich können Sie sie auch verkleinern, indem Sie beispielsweise den Wert 0,5 für 50% verwenden). Hier ist ein Arbeitsbeispiel für die Website mit Ihren Symbolen und Link zu documnetation :

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

Ich habe viel zu lange damit gespielt.

Ich habe eine Reihe von Symbolen, die ich skalieren möchte, um in verschiedene mat-icon-Größen zu passen, aber jedes Symbol benötigt eine andere Skala, damit es mit den anderen Symbolen ausgewogen erscheint - wodurch die ViewBox effektiv vergrößert wird.

Am Ende hat das gut funktioniert:

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%;
    }
}

Dann erstelle ich den mat-icon damit, wobei iconCss='shrink-80'

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

Der mat-icon selbst kann mit beliebigen zusätzlichen Klassen skaliert werden (genau wie bei einem normalen Symbol). Durch das Verkleinern wird die Größe innerhalb der Box angepasst.

2
Simon_Weaver

Bei der @mpro-Lösung habe ich einige Änderungen vorgenommen, die für mich besser geeignet sind (ich habe benutzerdefinierte Symbole, daher ist dies möglicherweise der Grund dafür):

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

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

oder die scss lösung:

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

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

In Angular Material 2 können Sie die Eigenschaft [inline] = "true" im Element verwenden. Laut Dokumentation "Ob das Symbol eingebettet werden soll, wird das Symbol automatisch an die Schriftgröße des Elements angepasst, in dem das Symbol enthalten ist". Befindet sich Ihr Matten-Symbol innerhalb eines div-Elements, können Sie die Schriftgröße im div-Element festlegen. Dies wird durch das Matten-Symbol vererbt.

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

So ändere ich die mat-icon-Größe in @angular/material26.0.0

Obwohl bei dieser Methode nur das SVG-Symbol die Größe ändert, wenn Sie mat-icon-button verwenden. Passen Sie einfach die Größe von mat-icon button an, wenn Ihre neue Größe zu groß ist. Sie müssen nicht daran denken, wenn es mat-icon ist. 

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

In meiner Anwendung mit Material 7 habe ich nur die Breite und Höhe des Elements "mat-icon" in CSS geändert (natürlich mit! Important) und es hat für mich wie ein Zauber gewirkt.

Zum Beispiel:

mat-icon {
    width: 32px !important;
    height: 32px !important;
}
0
TheCuBeMan