# All files FontIcon.tsx

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

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
    58
    59
    60
    611x
    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
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    884x
    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.
     */
    export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
      function FontIcon(props, ref) {
        const {
          className,
          children,
          "aria-hidden": ariaHidden = true,
          dense = false,
          theme,
          iconClassName = "material-icons",
          forceSize = false,
          forceFontSize = false,
          ...remaining
        } = props;

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