How to use @react-md/icon - 10 common examples

expanderIcon: propExpanderIcon,
    labelKey: _labelKey,
    valueKey,
    getItemLabel: _getItemLabel,
    getItemValue,
    getItemProps: _getItemProps,
    linkComponent: _linkComponent,
    sort,
    rootId,
    onBlur,
    onFocus,
    onKeyDown,
    ...props
  } = providedProps as WithDefaultProps;
  const { id } = props;
  const expanderIcon = useIcon("dropdown", propExpanderIcon);

  const {
    items,
    activeId,
    setActiveId,
    itemIdRefs,
    handleBlur,
    handleFocus,
    handleKeyDown,
  } = useTreeMovement({
    id,
    data,
    sort,
    rootId,
    onBlur,
    onFocus,

leftIcon: propLeftIcon,
    leftAvatar,
    rightIcon: propRightIcon,
    rightAvatar,
    forceIconWrap,
    height,
    threeLines,
    children,
    contentComponent: Content,
    isLink: propIsLink,
    disabled,
    readOnly,
    onFocus,
    ...props
  } = providedProps as WithDefaultProps;
  const expanderIcon = useIcon("expander", propExpanderIcon);

  const isLink =
    typeof propIsLink === "boolean"
      ? propIsLink
      : typeof Content !== "string" || Content === "a";

  const { ripples, className, handlers } = useInteractionStates({
    disabled,
    className: propClassName,
    handlers: isLink ? props : undefined,
    disableSpacebarClick: isLink,
  });

  let group;
  let leftIcon = propLeftIcon;
  let rightIcon = propRightIcon;

getOptionValue,
    getDisplayLabel,
    isOptionDisabled,
    disableLeftAddon,
    disableMovementChange,
    disableHideOnResize,
    disableHideOnScroll,
    readOnly,
    placeholder,
    value,
    onChange,
    rightChildren: propRightChildren,
    ...props
  } = providedProps as WithDefaultProps;
  const { id, disabled, error, dense } = props;
  const rightChildren = useIcon("dropdown", propRightChildren);

  const valued = typeof value === "number" || !!value;
  const displayValue = useMemo(() => {
    const currentOption =
      options.find(option => getOptionValue(option, valueKey) === value) ||
      null;

    return getDisplayLabel(currentOption, labelKey, !disableLeftAddon);
  }, [
    options,
    getDisplayLabel,
    labelKey,
    disableLeftAddon,
    getOptionValue,
    valueKey,
    value,

hideNavLabelledBy,
  sheetLabel,
  sheetLabelledBy,
  sheetStyle,
  sheetClassName,
  navHeader: propNavHeader,
  navHeaderTitle,
  navHeaderStyle,
  navHeaderClassName,
  navFooter,
  disableTemporaryAutoclose,
  ...props
}) => {
  const { selectedIds } = props;
  useTemporaryNavigation(selectedIds, disableTemporaryAutoclose);
  const hideNavIcon = useIcon("back", propHideNavIcon);
  const {
    hideNav,
    layout,
    isFullHeight,
    isPersistent,
    isNavVisible,
  } = useNavigationVisibility();
  const tree = (
    
  );

const Checkbox: FC> = ({
  forwardedRef,
  icon: propIcon,
  ...props
}) => {
  const icon = useIcon("checkbox", propIcon);

  return (
    
  );
};

inputClassName,
    forwardedRef,
    visibilityIcon: propVisibilityIcon,
    disableVisibility,
    visibilityStyle,
    visibilityClassName,
    visibilityLabel,
    ...props
  } = providedProps as WithDefaultProps;
  const { id } = props;
  const [type, setType] = useState<"password" | "text">("password");
  const toggle = useCallback(() => {
    setType(prevType => (prevType === "password" ? "text" : "password"));
  }, []);

  const visibilityIcon = useIcon("password", propVisibilityIcon);

  return (

const TreeItemExpanderIcon: FC = providedProps => {
  const { className, children, ...props } = providedProps as WithDefaultProps;
  const icon = useIcon("expander", children);

  return (
    
      {icon}
    
  );
};

disableIconSpacing,
    disableRepeatableFiles,
    onKeyDown,
    onKeyUp,
    onMouseDown,
    onMouseUp,
    onMouseLeave,
    onClick,
    onTouchStart,
    onTouchMove,
    onTouchEnd,
    onChange,
    ...props
  } = providedProps as WithDefaultProps;
  const { id, disabled } = props;
  const icon = useIcon("download", propIcon);

  const { ripples, className, handlers } = useInteractionStates({
    handlers: {
      onKeyDown,
      onKeyUp,
      onMouseDown,
      onMouseUp,
      onMouseLeave,
      onClick,
      onTouchStart,
      onTouchMove,
      onTouchEnd,
    },
    className: buttonThemeClassNames({
      theme,
      themeType,

const MenuButton: FC = ({
  className,
  visible,
  children,
  forwardedRef,
  dropdownIcon: propDropdownIcon,
  disableDropdownIcon,
  first,
  last,
  inheritColor,
  asAppBarAction,
  ...props
}) => {
  const { buttonType } = props;
  const dropdownIcon = useIcon("dropdown", propDropdownIcon);
  const actionClassName = useActionClassName({ first, last, inheritColor });
  return (
    <button aria-expanded="{visible">
      </button>

const BadgedButton: FC = providedProps => {
  const {
    badgeStyle,
    badgeClassName,
    badgeRef,
    badgeId: propBadgeId,
    buttonChildren: propButtonChildren,
    badgeTheme,
    forwardedRef,
    children,
    disableNullOnZero,
    "aria-describedby": propDescribedBy,
    ...props
  } = providedProps as WithDefaultProps;
  const { id } = props;
  const buttonChildren = useIcon("notification", propButtonChildren);

  let badgeId = propBadgeId || "";
  if (!badgeId && id) {
    badgeId = `${id}-badge`;
  }

  let describedBy = propDescribedBy;
  if (!isEmpty(children, disableNullOnZero)) {
    describedBy = cn(describedBy, badgeId);
  }

  return (
    <button aria-describedby="{describedBy}">
      {buttonChildren}
      </button>