import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { MATERIAL_CONFIG } from "./materialConfig.js";
import { icon } from "./styles.js";
/**
 * The `MaterialIcon` component is used for rendering a material icon using the
 * Google Fonts stylesheet (handled separately). This is mostly a convenience
 * wrapper around the `FontIcon` that will catch typos for the supported icon
 * names.
 *
 * @example Simple Example
 * ```tsx
 * <MaterialIcon name="3k" />
 * <MaterialIcon name="favorite" theme="primary" />
 * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
 * ```
 *
 * @see {@link https://react-md.dev/components/icon | Icon Demos}
 * @see {@link https://react-md.dev/components/material-icons|Available Material Icons}
 * @since 6.0.0
 */ export const MaterialIcon = /*#__PURE__*/ forwardRef(function MaterialIcon(props, ref) {
    const { "aria-hidden": ariaHidden = true, name, family = MATERIAL_CONFIG.iconFamily, theme, dense, className, ...remaining } = props;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        "aria-hidden": ariaHidden,
        ref: ref,
        className: icon({
            type: "material",
            family,
            theme,
            dense,
            className
        }),
        children: name
    });
});

//# sourceMappingURL=MaterialIcon.js.map