web-dev-qa-db-fra.com

Comment changer la taille de mat-icon sur Angular Material?

balise mat-icon de Angular Le matériel a toujours une taille par défaut de 24px. Alors, comment le changer ... ???

.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
javascripthtmlcssangular
12
Nguyễn Phúc

Depuis Angular Le matériau utilise 'Icônes de matéria' Police-Famille, la taille de l'icône dépend de police-taille.

Par conséquent, si vous souhaitez modifier la taille de l’icône, modifiez-la font-size dans votre fichier CSS.

Par exemple,

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

la taille de la police a tendance à gâcher 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 effectivement être n'importe quel nombre. 2 double la taille d'origine.

13
Petey

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

En fonction de votre cas d'utilisation, une bonne fonctionnalité de mat-icon est une entrée bool de [inline], définissez-la sur true et la taille sera automatiquement adaptée à l'élément qui le contient.

6
Iamamellon

L'approche "taille de police" ne fonctionne que pour le dimensionnement normal (basé sur les polices). Ainsi, cela ne fonctionne pas pour les icônes svg, dont le seul moyen de redimensionner qui a vraiment fonctionné pour moi jusqu’à présent était de l’agrandir/réduire.

1
Marcos Trazzini

Créez le nom de la classe correspondant à la fonction réelle. Il devient plus facile de s'en souvenir, de l'utiliser et de l'étendre.

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

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

Changer mat-icon taille de police pour l'ensemble du projet, j'ai créé un icon.css fichier et l'a ajouté à angular.json

Contenu à l'intérieur icon.css:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px; // Changing font-size for whole project
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  Word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

Dans angular.json ajouter le icon.css fichier dans vos styles dans build:

...

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    ...,
    "styles": [
        {
        "input": "src/assets/app-theme.scss -- if any"
        },
        "src/styles.scss -- if any",
        "src/assets/angular-material/icon.css"

...

Remarque: incluez des feuilles de style selon votre projet.

0
rainversion_3