Skip to content

Icon

Default icon

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.

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.

Show code
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} />
</>
);
}

Sizes

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

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 />: