# All files MaterialSymbol.tsx

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

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
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    1131x
    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
    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
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    1x
     import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
    import { type MaterialSymbolName } from "./material.js";
    import {
      getFontVariationSettings,
      type MaterialSymbolCustomization,
      type MaterialSymbolFill,
      type MaterialSymbolGrade,
      type MaterialSymbolOpticalSize,
      type MaterialSymbolWeight,
    } from "./materialConfig.js";
    import { icon, type MaterialSymbolClassNameOptions } from "./styles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-symbol-fill"?: MaterialSymbolFill;
        "--rmd-symbol-wght"?: MaterialSymbolWeight;
        "--rmd-symbol-grad"?: MaterialSymbolGrade;
        "--rmd-symbol-opsz"?: MaterialSymbolOpticalSize;
      }
    }

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

    /**
     * **Server Component**
     * This is a convenience component that provides autocomplete for all the
     * available material symbols via the `name` prop.
     *
     * Note: You might notice IDE slowdowns for files that use this component since
     * there are so many icons available. If it becomes an issue, just stop using
     * this component and define the icons inline instead.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { MaterialSymbol } from "@react-md/core";
     * import type { ReactElement } from "react";
     * import { createRoot } from "react-dom/client";
     *
     * function Example(): ReactElement {
     *   return (
     *     <>
     *       <MaterialSymbol symbol="close" />
     *       <MaterialSymbol symbol="tune" type="outline" />
     *
     *       <MaterialSymbol symbol="add" type="round" />
     *       <MaterialSymbol symbol="air" type="sharp" />
     *     </>
     *   );
     * }
     *
     * const root = createRoot(document.getElementById("root"));
     * root.render(<App />);
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export const MaterialSymbol = forwardRef<HTMLSpanElement, MaterialSymbolProps>(
      function MaterialSymbol(props, ref) {
        const {
          "aria-hidden": ariaHidden = true,
          className,
          name: symbol,
          style: propStyle,
          symbolFamily,
          fill,
          weight,
          grade,
          opticalSize,
          theme,
          dense,
          ...remaining
        } = props;
        const { style, family } = getFontVariationSettings({
          style: propStyle,
          fill,
          weight,
          grade,
          opticalSize,
          symbolFamily,
        });

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