fix: update dependency @react-md/material-icons to v6 #3114

- do not allow clear button to be clickable while hidden
- update controllable hooks/components to show the correct prop name instead of only showing value
- update source comments to use https://react-md.dev instead of https://next.react-md.dev
Updated dependencies
- @react-md/core@6.0.2

`v6.0.1`

Compare Source

Patch Changes

Fixed the media-queries using map.nth instead of map.get after switching from list.nth.
Updated dependencies
- @react-md/core@6.0.1

`v6.0.0`

Compare Source

Major Changes

64071b7: The next preview of v6.0.0.

Breaking Changes:
- An accessible label is now required for CircularProgress and LinearProgress
  - Updated AsyncButton to pass props to the progress component and other
    accessibility teaks
  - Updated CircularProgressSuspense to default the aria-label to "Loading"
- Removed the VerticalDivider component
- Rename hoverTime/leaveTime to hoverTimeout/leaveTimeout for hover mode
- Removed the forceSize/forceFontSize props from the FontIcon
- Removed the useOverflowTooltip and instead integrate it into the
  useTooltip hook. It's cheaper to check on the start event instead of having
  a resize observer always active
- Removed the LinkProvider since it was only used for the Tree component and
  it's easier to pass the custom link component down
Features:
- Added TRANSITION_CONFIG so transitions can be disabled
  - Updated the @react-md/test-utils/jest-setup to always disable transitions
    in tests
- Added MATERIAL_CONFIG to override defaults instead of using context
- Adding support for including data-testid in all HTMLAttributes by including
  @react-md/test-utils/data-testid somewhere (normally setupTests.ts)
- Added theme to Avatar
- Update Dialog to be an alertdialog by default when modal is enabled and
  added aria-modal when modal is enabled
- Add additional props to Slider to customize the tooltip
- Updated all table styling utility functions to be in separate files so they
  aren't forced as client code
- Added iconRotatorProps for the TableCell
- Updated isStickyActive to provide the isInTableContainer boolean and
  export isTableFooterStickyActive default function
- Add support for stickyActiveClassName
- Added support for TableRadio component
- Updated DropdownMenu to support controlling the visibility
Bug Fixes:
- Improved performance for multiple transitions by no longer causing layout
  shifts
- Add some missing custom properties to inline styles for Typescript
- Update Tooltip to default to temporary again. There's no need to create 1000
  nodes in large apps on startup
- Fixed styles for MenuItemCheckbox, MenuItemRadio, and MenuItemSwitch
- Fix Slider marks when the min value is not 0
- Fixed the default anchor for the Menu component when using a floating action
  button
- Update Tooltip to use textOverflow instead of disableLineWrap
- Update Switch to no longer be a client component
- Update Switch to support rendering components within the ball
This is a major rework release for react-md with lots of features, breaking
changes, and bugfixes. There were over 1200 commits, so I won't really list
everything here.

Check out the release notes
or a small summary below:

This is probably one of the most useful components to be added to react-md. The
Box component is a wrapper around the CSS box model for
display: flex and display: grid and can be used to implement most of the
DOM structure or layout without custom styling.

With the introduction of the Box component, the
Grid,
GridCell,
GridList, and
GridListCell components have been removed. See the
Material Grid Example for an example
using the Box component.

!Info! All the available icons can be found using the new
Material Icons and Symbols page.

The @react-md/material-icons package has been updated to support the latest
material icons but only through SVG icons. To continue using font icons, either
use the new MaterialIcon component or the FontIcon component.

Material symbols can be used through the new MaterialSymbol component
that supports customizing the weight, grade, and optical size globally,
for a section of the app, or one offs.

If you've used react-md in the past, you'll probably know that the
Autocomplete "worked" but wasn't user friendly or useful. With this version
of react-md, the Autocomplete has been remade to improve the user experience
by acting more like an editable Select component. So the Autocomplete
is more in line with the react-select and the
material-ui Autocomplete.

Here's a quick summary of the new changes:
- The default behavior requires a valid option to be selected and will reset to
  the last valid option or an empty string
- Multiple values are now supported with optional inline chips or checkboxes
- Circular progress bars are now supported
- The selected option and input value can both be controlled
- The component API should hopefully make more sense without the
  getResultLabel, getResultValue, ... whatever I was doing before
- More type safety
!Info! Check out the new Autocomplete demos
to see more!

The toasts and alerts have been updated so toasts can be shown from anywhere
instead of only within React components with the useAddToast hook. Toasts
can now be created by importing the new addToast function.
```
import { Snackbar } from "@&#8203;react-md/core/snackbar/Snackbar";
import { addToast } from "@&#8203;react-md/core/snackbar/ToastManager";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import "./index.scss";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Snackbar />
  </StrictMode>
);

// doesn't need to be called from react components!
window.setTimeout(() => {
  addToast({ children: "Hello, world!" });
}, 3000);
```
Some other new features for snackbars and toasts are:
- supports the theme colors
- allows configuring the visible time on a per-toast basis
- the toast timeout pauses while the user hovers the toast
- multiple toasts can be rendered at once
- new customization through a custom toast renderer prop
Check out the new snackbar demos to see more!

The dark mode has been improved so that the interaction states are now visible
by default when switching to the dark mode. The following images show the
normal, hover, then focus states for a button with the dark theme enabled.

Other native elements like the <select> should also update based on the dark
mode color scheme.

The Slider component has been simplified and now only requires a value and
setValue to use. Due to these changes, the RangeSlider is no longer
required and has been merged into the Slider component.

In addition, the Slider component now supports rendering marks below to help
show where specific values are within the range.

Tooltips now support being shown only if there is overflow text. Check out the
Overflow Only Tooltip demo for
more information!

A simple objectFit utility function has been created for
styling images, videos, and other media types. This should be able to replace
most of the MediaContainer / ResponsiveItem usage in your app with better
styling behavior.

The Tab components have been updated to support:
- scrolling with buttons instead of the
  hidden scrollbar option that existed before
- being rendered vertically
- maintaining a consistent tab panel height using the new
  useMaxTabPanelHeight hook
The Tree component has been updated with a few new customization options like
the expansionMode which allows the child
tree items to only become visible after clicking the icon instead of anywhere
in the tree item.

The CircularProgress and LinearProgress components now support the
primary, secondary, warning, success, error, and current-color
themes.

Most components now expose a class name utility function to provide styles without
using the component itself. The naming conventions are to use a
camelCasedName instead of PascalCased. For example:
- button for the Button component
- expansionPanel for the ExpansionPanel component
- typography for the Typography component
In addition, a general cssUtils helper has been created for
common styling.

New polyfills and test utils are now provided that integrate with
jest and vitest to improve
testing. Check out the testing quickstart guide
on how to get started.

A few new components and hooks have been added:
The documentation site has been remade to hopefully improve finding information
with the following changes:
- Navigation is based on component, hook, or feature instead of package.
- Examples and demos have been trimmed down to focus on a single feature and
  file at a time. There are a few more complex examples near the end.
- Most examples and demos can be edited and previewed within the website
  instead of needing to create a codesandbox
- The code editor theme can be configured in the global settings menu
The Checkbox and Radio components no longer use some hacky CSS to overlay
the checked icon state to show the unchecked state. Instead, both icons are
rendered and toggled using CSS and the :checked state allowing for easier
customization.

If a react-md component is imported that uses CSS variables, the variables will now
become visible and type-checkable with typescript when defining inline styles.
```
import { Avatar } from "@&#8203;react-md/core/avatar";

function Example() {
  return (
    <div
      style={{
        // no longer a type error!
        "--rmd-avatar-color": "orange",
        "--rmd-avatar-border-radius": "0.5rem",
      }}
    >
      <Avatar>A</Avatar>
    </div>
  );
}
```
The new scroll locking behavior prevents layout shifts by calculating the
current scrollbar size and applying padding to the root element. This can
drastically improve performance for apps that rely on resize observers to
position content.

The styles have been re-written to always have the lowest
CSS specificity
allowing custom styles to override react-md with ease.

The :focus styles for almost every component now uses :focus-visible
instead of relying on .keyboard mode &:focus removing the
UserInteractionModeProvider requirement from these styles. If the previous
focus behavior is desired, set $SASSDOC to true

All react-md components that required an id now default to
useId() and can be omitted.

By enabling a new ssr mode in the
CoreProviders, temporary components like dialogs
and overlays will remain visible and mounted after being rendered on the server
until the first time they are unmounted.

In addition, the general layout has been updated to handle SSR behavior better
by relying on media queries for switching between layout types instead of only
requiring javascript. Check out the new layout documentation
for more examples.

Every StrictMode error has been fixed
and react-md is ready for React 19. The documentation site has been using the
React 19 RC for a long time without
issue. In addition, it is now possible to prevent the entire app from being
marked as a client boundary when importing a component from react-md. Each
component and hook has been correctly marked with the "use client" directive
as needed.

The Portal has been updated to render all content within
a <div id="rmd-portal-container" /> by default instead of the document.body.
This allows quick access in the dev-tools to inspecting portal elements and
preventing any issues that might appear for rendering additional nodes in the
document.body.

With the migration to ESM, the @react-md/core package has been created to
only support importing from specific paths instead of a
root barrel file.
This will improve development speed as bundlers will no longer need to fetch
all files within react-md to begin compiling.

The base react-md package will still support a root barrel file import if
this is not a concern.
```
-import { Card, CardTitle } from "@&#8203;react-md/card";
+import { Card } from "@&#8203;react-md/core/card/Card";
+import { CardTitle } from "@&#8203;react-md/core/card/CardTitle";

 // Γ£à This still works, but will result in slower dev builds
 import { Card, CardTitle } from "react-md";
```
In prior versions of react-md, inspecting CSS variables could be difficult
because they were split into multiple rules without using postcss plugins.
Starting with react-md@v6, custom properties will automatically be grouped
together in the devtools.

The gzipped sizes have decreased slightly with the latest version of react-md:
- Javascript: 92.51 kB to 82.77 kB
- SCSS: 18.08 kB to 16.55 kB
  - NOTE: This was the smallest theme bundle with $primary-color: $grey-500,
    $secondary-color: $red-700, $color-scheme: light for both version of react-md
There were a lot of breaking changes, but a few will be called out here specifically.

react-md will now only support ESM going forward since most build tools already
support it. In addition, the legacy @import syntax is no longer supported for
Sass.

Ready to upgrade to react-md v6? Head to the v6 migration guide next.
64071b7: Initial v6 release test
d8f185b: Updated custom properties to require a defined value instead of always providing a fallback. This decreases the bundle size by a good amount.

Also updated the Snackbar so that it no longer has a role="status" to fix accessibility. Instead, each toast will have role="status" or role="alert".

Patch Changes

bdcbd82: Fixed the SVGIcon import path from @react-md/core after trying new package.json exports.
093d3bf: This release is mostly around adding codemods for v5 to v6, but also:
- reduced the installation size for react-md packages by excluding non-critical files
  - i.e. Ignore test files, mocks, files that aren't required for source maps, etc
- fixed documentation
- removed the invalid server component comments since they aren't server components. they are just components that do not require client side js
- split the expansion panel, list, sheet styles into separate files so that the style utility classes can be used without client size js
- fixed the inline icon styles to be vertical-align: middle instead of vertical-align: bottom to work with more font sizes
- renamed TreeItemDefaultIds to TreeDefaultIds to match naming conventions
- fixed some vertical tabs and scroll button styles
- added more convenience pass-through props to the useTabs hook options
- added the TreeItemRenderer utility type
a1483f0: This release focused on documentation but had a few new features:
- added Mark and HighlightedText components
- added a simple ErrorBoundary component
- the a11y sass import can be used in the @forward file by using the new @react-md/core/a11y import
- icon styles now include a --rmd-icon-dense-size custom property
- the Autocomplete clear button requires less javascript and supports a few visibility modes
- added an onEnteredOnce callback for transitions to handle triggering a callback when transitions are disabled
- added getTransitionCallbacks to help merge transition callbacks
Bug fixes:
- the List component correctly implements dense mode
- private files are now excluded from the @react-md/core package exports
- constants and file names were updated to be more consistent
- separate some code to allow more server/client code splitting
Documentation updates:
- now able to search the documentation website
- all components and hooks should now have a link to the documentation page on the website to navigate from your editor of choice
- all sass items now have sassdoc and can be viewed on the website
- all code examples use the correct import path
- added vite-ts, vite-js, and mlaursen-vite example templates
31b0fa5: Experimental support for package.json exports and updated material icons.
a26803b: - Updated the useLocalStorage hook to be more generic and renamed to useStorage
- Added test support for vitest using @react-md/core/test-utils/vitest
  - Moved jest-globals to @react-md/core/test-utils/jest-globals
- Added additional test queries to help find react-md elements in tests
- Simplified form sass imports
- Added gridAutoRows behavior to the Box component
- Add the capture prop to the MenuItemFileInput
- Updated the useTextField hook to support rendering the counter while disableMessage is true
- Updated useTextField to support the "valid" ValidityState
- Fixed the layout navigation not handling scrollbars in RTL mode
- Added the useTableOfContentsHeadings hook to support dynamic table of contents
- Updated most default transition timeouts and classnames to use satisfies to allow better typing
- Added SimpleTabPanels and SimpleTabPanel components when the tab panels do not need to animate
- The vertical Tab now display the active tab indicator to the right instead of the left by default
- The TabList component supports full width tabs without truncating
- The tab components moved more customization to custom CSS properties:
  - min-height
  - min-width
  - max-width
  - stacked-height
  - stacked-width
  - padding
  - stacked-padding
- A new useTabPanelMaxHeight hook has been added to prevent layout shifts while switching between tabs
- The TabList now supports dynamically adding scroll buttons
- Hopefully made the color scheme behavior make more sense with some renaming
- Added DEFAULT_COLLATOR_OPTIONS if they should be used for new alphaNumericSort comparators
- bem util now allows styles().base to get the base class name
- Added touch-action: none to the draggable components and updated useDraggable to
  match that new behavior
- ArrowUp and ArrowDown work as expected for vertically draggable components
- Fixed some re-rendering issues that would happen in React 19 by moving to useEffect
- The progress styles correctly use the progress layer instead of overlay
- The progress styles now add will-change to increase perf
- The "scroll right" button in the TabList correctly disables
- The Tab will only shrink once the max-width has been reached instead of
  if there is not enough room in the container
- The useDropzone hook correctly captures blur events when the user drags
  from the dropzone immediately to the file browser
- useMutationObserver uses the onUpdate instead of onUpdated to match other use*Observer hooks
- Added most remaining documentation to the website
1a8cfaf: This release focused on starting to create the codemods for v5 to v6, which helped me find and fix:
- Fixed the surface colors when $color-scheme: light
- CardSubtitle can now remove the secondary text color like v5 using the textColor Typography prop
- Moved the sticky styles behavior for tables into StickyTableSection instead of TableHeader/TableFooter
- Moved more table types into the types.ts file
- Re-ran the material icons script to fix the types for MaterialSymbol and MaterialIcon
- Updated documentation for components and changes between v5
68f0920: The next v6 alpha release.

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

fix: update dependency @react-md/material-icons to v6

48f2741

renovate bot force-pushed the renovate/major-react-md-monorepo branch from 38549e0 to 48f2741 Compare December 3, 2025 17:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: update dependency @react-md/material-icons to v6 #3114

fix: update dependency @react-md/material-icons to v6 #3114

renovate bot commented Nov 19, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

fix: update dependency @react-md/material-icons to v6 #3114

Are you sure you want to change the base?

fix: update dependency @react-md/material-icons to v6 #3114

Conversation

renovate bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Features

Patch Changes

Patch Changes

Major Changes

Patch Changes

Configuration

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

renovate bot commented Nov 19, 2025 •

edited

Loading