# All files / src/icon MaterialIcon.tsx

100% Statements 50/50
100% Branches 1/1
100% Functions 1/1
100% Lines 50/50

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    511x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    13x
    1x
     import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
    import { type MaterialIconName } from "./material.js";
    import { MATERIAL_CONFIG } from "./materialConfig.js";
    import { icon, type MaterialIconClassNameOptions } from "./styles.js";

    /** @remarks \@since 6.0.0 */
    export interface MaterialIconProps
      extends HTMLAttributes<HTMLSpanElement>,
        Partial<MaterialIconClassNameOptions> {
      /** @defaultValue `true` */
      "aria-hidden"?: AriaAttributes["aria-hidden"];
      name: MaterialIconName;
      children?: never;
    }

    /**
     * **Server Component**
     *
     * @remarks \@since 6.0.0
     */
    export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
      function MaterialIcon(props, ref) {
        const {
          "aria-hidden": ariaHidden = true,
          name,
          family = MATERIAL_CONFIG.iconFamily,
          theme,
          dense,
          className,
          ...remaining
        } = props;

        return (
          <span
            ref={ref}
            aria-hidden={ariaHidden}
            {...remaining}
            className={icon({
              type: "material",
              family,
              theme,
              dense,
              className,
            })}
          >
            {name}
          </span>
        );
      }
    );