# All files / src/icon FontIcon.tsx

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

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
    51
    52
    53
    54
    55
    56
    57
    581x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1018x
    1x
     import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { icon, type FontIconClassNameOptions } from "./styles.js";

    export interface FontIconProps
      extends HTMLAttributes<HTMLElement>,
        FontIconClassNameOptions {
      /**
       * Any children to render to create the font icon. This is required for
       * material-icons.
       */
      children?: ReactNode;
    }

    /**
     * **Server Component**
     *
     * The `FontIcon` component is used for rendering a font-icon library's icon.
     * The default is to use the `material-icons` library, but others can be used as
     * well.
     *
     * If you are using another font icon library that does not always create icons
     * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
     * `forceSize` and `forceFontSize` props to fix the sizing issues.
     *
     * \@remarks \@since 6.0.0 Switched from `<i>` to `<span>` element and removed
     * the `forceSize`/`forceFontSize` props.
     */
    export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
      function FontIcon(props, ref) {
        const {
          className,
          children,
          "aria-hidden": ariaHidden = true,
          dense = false,
          theme,
          iconClassName = "material-icons",
          ...remaining
        } = props;

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