Topic: How can I customize MDB icons to match my brand colors in a React project?
Hello,
I’m working on a React project using MDB and I want to customize the default MDB icons to align with my brand’s color palette. Specifically, I’m looking to change the icon colors dynamically based on user interactions (e.g., on hover or active states).
I’ve tried changing the color property via CSS, but I’m wondering if there’s an MDB-specific or more efficient way to approach this without affecting the responsiveness and consistency of the icons across components.
import { MDBIcon } from 'mdb-react-ui-kit';
function Example() { return ; }
MDBIcon has a color property, which can be used to set one of the predefined mdb colors (primary, secondary, warning etc.).
If you need a different color, just add a class with a css style.
import React from 'react';
import { MDBIcon } from 'mdb-react-ui-kit';
import './style.css'
export default function App() {
return (
<>
<MDBIcon className='ms-1' icon='camera' size='5x' color="warning" />
<MDBIcon className='my-color' icon='camera' size='5x' />
</>
);
}
// style.css
.my-color {
color: #df6e6e;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes