Icon

Default icon

sticky_note_2sticky_note_2sticky_note_2sticky_note_2sticky_note_2

Show code

default.tsx

import { Icon } from "@hrc/material-icons";

export function IconDefault() {
  return (
    <>
      <Icon name="sticky_note_2" />
      <Icon name="sticky_note_2" variant="outlined" />
      <Icon name="sticky_note_2" variant="round" />
      <Icon name="sticky_note_2" variant="sharp" />
      <Icon name="sticky_note_2" variant="two-tone" />
    </>
  );
}

Colors

Use the color prop to change the color of the icon.

settingssettingssettingssettingssettingssettings

Show code

colors.tsx

import { Icon } from "@hrc/material-icons";

export function IconColors() {
  return (
    <>
      <Icon name="settings" color="primary" />
      <Icon name="settings" color="secondary" />
      <Icon name="settings" color="error" />
      <Icon name="settings" color="info" />
      <Icon name="settings" color="warning" />
      <Icon name="settings" color="success" />
    </>
  );
}

Disabled

Add the disabled prop to disable the icon. The disabled variant has a higher priority than the color variant.

toggle_offDisabled

question_answerquestion_answerquestion_answerfingerprintfingerprintfingerprint

Show code

disabled.tsx

import { useState } from "react";
import { Icon } from "@hrc/material-icons";
import { ToggleDisabled } from "./ToggleDisabled";

export function IconDisabled() {
  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <ToggleDisabled disabled={disabled} setter={setDisabled} />

      <Icon name="question_answer" disabled={disabled} />
      <Icon name="question_answer" variant="outlined" disabled={disabled} />
      <Icon name="question_answer" variant="round" disabled={disabled} />

      <Icon name="fingerprint" color="warning" disabled={disabled} />
      <Icon name="fingerprint" color="info" disabled={disabled} />
      <Icon name="fingerprint" color="success" disabled={disabled} />
    </>
  );
}

ToggleDisabled.tsx

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

type Props = {
  disabled: boolean;
  setter: (disabled: boolean) => void;
};

export function ToggleDisabled({ disabled, setter }: Props) {
  return (
    <div>
      <Button
        color={disabled ? "info" : undefined}
        onClick={() => setter(!disabled)}
      >
        <Icon name={disabled ? "toggle_on" : "toggle_off"} />
        Disabled
      </Button>
    </div>
  );
}

Sizes

Set the size prop to change the size of the icon.

peoplepeoplepeoplepeoplepeople

Show code

sizes.tsx

import { Icon } from "@hrc/material-icons";

export function IconSizes() {
  return (
    <>
      <Icon name="people" color="primary" size="inherit" />
      <Icon name="people" color="primary" size="small" />
      <Icon name="people" color="primary" />
      <Icon name="people" color="primary" size="large" />
      <Icon name="people" color="primary" size="extra-large" />
    </>
  );
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <Icon />:

• <Icon />