Tilbake til alle komponenter

Icon

Icon rendrer Material Symbols-ikoner. Gi navnet på ikonet som child-tekst.

Viktig informasjon

Et ikon uten ledsagende tekst må ha aria-label — ellers er det usynlig for skjermlesere.

Props

Props
Prop
Type
Påkrevd
Standard
Beskrivelse
childrenReactstringJa—Material Symbol-navn, f.eks. "arrow_forward".
boldReactbooleanNei—Tykkere strekbredde.
filledEgendefinertbooleanNei—Fylt variant av ikonet.
asEgendefinert"div" | "span"Nei"span"HTML-element ikonet rendres som.

Utfasede props

Utfasede props
Prop
Type
Påkrevd
Standard
Beskrivelse
variantEgendefinertUtfaset"small" | "medium" | "inherit"Nei—Størrelsesvarianten til ikonet.

Eksempler

Vanlige ikoner

Eksempler på ikoner fra Material Symbols-biblioteket.

TSX

Fylt og fet variant

Bruk filled for fylt versjon og bold for tykkere strekbredde.

TSX

Migrering

Disse eksemplene viser hvordan du erstatter utfasede props med den anbefalte API-en.

Ikonstørrelse arves nå fra omgivelsene

Utfaset

variant-propen er utfaset. Størrelsen settes nå automatisk fra omgivelsenes fontstørrelse. Fjern variant og kontroller størrelsen med CSS font-size på et omsluttende element om nødvendig.

  1. Finn denne koden
    TSX
    <Icon variant="small">home</Icon>
<Icon variant="medium">home</Icon>
  2. Erstatt med dette
    TSX
    <Icon>home</Icon>

// Trenger du en spesifikk størrelse, styr med CSS:
<span style={{ fontSize: "1.5rem" }}>
    <Icon>home</Icon>
</span>