Custom icons for the GainControl component.
All icons in the GainControl can be replaced with custom React nodes. The icon displayed changes automatically based on the current volume level.
import { FaVolumeMute, FaVolumeDown, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';const customIcons: Partial<GainControlIcons> = { volumeOff: <FaVolumeOff />, volumeMute: <FaVolumeMute />, volumeDown: <FaVolumeDown />, volumeUp: <FaVolumeUp />,};<GainControl icons={customIcons} onChange={handleChange} /> Copy
import { FaVolumeMute, FaVolumeDown, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';const customIcons: Partial<GainControlIcons> = { volumeOff: <FaVolumeOff />, volumeMute: <FaVolumeMute />, volumeDown: <FaVolumeDown />, volumeUp: <FaVolumeUp />,};<GainControl icons={customIcons} onChange={handleChange} />
Icon when volume is low-medium
Icon when volume is very low
Icon when muted or value is 0
Icon when volume is high
Custom icons for the GainControl component.
Remarks
All icons in the GainControl can be replaced with custom React nodes. The icon displayed changes automatically based on the current volume level.
Example