javascript - Endre størrelsen på mat-icon-knapp

Hvordan kan jeg endre størrelsen på mat-ikon-knappen? Ikonet mitt er på 24px nå, og jeg vil øke den verdien til 48px. Jeg bruker mat-ikon som knappinnhold. Jeg har også lagt merke til at mat-ikon-knappen bare har en fast størrelse på 40px/40px.

<button mat-icon-button color="primary">
    <mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>

Svar #1

Med Angular 8+

endring av størrelse fungerte for meg med:

.small-icon-button {
   width: 24px !important;
   height: 24px !important;
   line-height: 24px !important;

   .mat-icon {
      width: 16px !important;
      height: 16px !important;
      line-height: 16px !important;
   }
   .material-icons {
      font-size: 16px !important;
   }
}

Ingen ::ng-deep kreves.

Angular 15+ Oppdatering:

For de nye MDC-komponentene er det litt annerledes. Du kan også sjekke min direktiv for å ha forskjellige ikon-knapp-størrelser. https://github.com/btxtiger/mat-icon-button-sizes

.small-icon-button {
   width: 24px !important;
   height: 24px !important;
   padding: 0px !important;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;

   & > *[role=img] {
      width: 16px;
      height: 16px;
      font-size: 16px;

      svg {
         width: 16px;
         height: 16px;
      }
   }

   .mat-mdc-button-touch-target {
      width: 24px !important;
      height: 24px !important;
   }
}

Svar #2

Mat-ikoner er skrifttyperbilder. For å endre størrelsen deres bør du overstyre skriftstørrelsen til mat-ikon. For Angular Material 8+, legg til følgende i komponentens stilark:

.mat-icon{
    font-size:48px !important; //make it bigger, the default being 24px. 
    width:48px;                //Do not forget to adjust the 
    height:48px;               //height and/or the width, as in the demo

}

Demo

eller direkte i HTML-en:

<mat-icon style="font-size:48px">mail</mat-icon>

HTML:

<button mat-button>    
  <mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>

CSS

::ng-deep .mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Sjekk ut demoen

Klasse:

import {ViewEncapsulation} from '@angular/core';

@Component({
  encapsulation: ViewEncapsulation.None
})

Da kan du stilsette direkte fra komponentens stilark.

CSS:

.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

styles.css

.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

HTML:

<button mat-button>    
  <mat-icon style="
    height:48px !important;
    width:48px !important;
    font-size:48px !important;" class="material-icons">play_circle_filled</mat-icon>
</button>

Demo

Svar #3

I komponentens scss-fil (forutsatt sass):

.mat-icon-button.large {

    width: 48px;
    height: 48px;
    line-height: 48px;

    .mat-icon {
      font-size: 48px;
      width: 48px;
      height: 48px;
      line-height: 48px;
    }
  }

Du kan endre til hvilke som helst størrelser du ønsker for både knappen og ikonet. Hvis begge er satt til 48, vil det ikke være noe mellomrom rundt ikonet. Du vil kanskje øke knappestørrelsen til noe som 64.

I din html:

<button mat-icon-button class="large"><mat-icon>chat</mat-icon></button>

Svar #4

Mange svar er unødvendig kompliserte... Her er hva som fungerte for meg ved bruk av Angular 9:

Hvis du antar at du vil at ikonet ditt skal være 40x40:

HTML:

<button mat-icon-button>
    <mat-icon id="add">add</mat-icon>
</button>

CSS:

.mat-icon {
    height: 40px;
    width: 40px;
    font-size: 40px;
    line-height: 40px; // DO NOT FORGET IT !
}

Ikke nødvendig med ng-deep eller !important.

Relaterte artikler