src/dev-app/icon/icon-demo.html - main - githubmirror/components

src/dev-app/icon/icon-demo.html

69 строк2 KB

Adrien Crivelli

feat(material/icon): SEO friendly ligature icons (#24578)

27 июн 2022, 23:39

27 июн 2022, 23:39b37c96d

<div class="demo-icon">
  <p>
    These are some icons.
  </p>

  <p>
    By name registered with MatIconProvider:
    <mat-icon svgIcon="thumb-up" class="demo-icon-green"></mat-icon>
    <mat-icon svgIcon="thumb-up"></mat-icon>
  </p>

  <p>
    From inline template with MatIconProvider:
    <mat-icon svgIcon="bike" class="green"></mat-icon>
    <mat-icon svgIcon="bike"></mat-icon>
  </p>

  <p>
    Mirrored in RTL:
    <mat-icon class="mat-icon-rtl-mirror green" svgIcon="thumb-up"></mat-icon>
    <mat-icon class="mat-icon-rtl-mirror" svgIcon="thumb-up"></mat-icon>
    <mat-icon class="mat-icon-rtl-mirror green" svgIcon="bike"></mat-icon>
    <mat-icon class="mat-icon-rtl-mirror" svgIcon="bike"></mat-icon>
  </p>

  <p>
    From icon set:
    <mat-icon svgIcon="core:alarm"></mat-icon>
    <mat-icon svgIcon="core:accessibility"></mat-icon>
    <mat-icon svgIcon="core:alarm"></mat-icon>
  </p>

  <p>
    From inline icon set:
    <mat-icon svgIcon="core-inline:account-balance"></mat-icon>
    <mat-icon svgIcon="core-inline:account-balance-wallet"></mat-icon>
    <mat-icon svgIcon="core-inline:account-box"></mat-icon>
  </p>

  <p>
    Ligature from Material Icons font by attribute:
    <mat-icon fontIcon="home"></mat-icon>
  </p>

  <p>
    Ligature from Material Icons font by content:
    <mat-icon>home</mat-icon>
  </p>

  <p>
    Using a theme:
    <mat-icon color="primary">home</mat-icon>
    <mat-icon color="accent">home</mat-icon>
    <mat-icon color="warn">home</mat-icon>
  </p>

  <p>
    Custom icon font and CSS:
    <mat-icon fontSet="fontawesome" fontIcon="fa-birthday-cake"></mat-icon>
  </p>

  <span>Inline styling allows icons to appear as the same size as text around them.</span>
  <p>
    My <span class="cdk-visually-hidden">dog</span><mat-icon inline="true">pets</mat-icon> is my
    <span class="cdk-visually-hidden">favorite</span><mat-icon inline="true">favorite</mat-icon>,
    he loves to go on <span class="cdk-visually-hidden">walks</span>
    <mat-icon inline="true">directions_walk</mat-icon>
  </p>
</div>