Topic: Provide file path to icon
How to provide file path (image in SVG format) to MDBIcon?
Hi @Palak@tru,
This is my code to use svg image in button.
My App.js file:
import React from 'react';
import { MDBBtn } from 'mdbreact';
import './App.css';
const ButtonPage = () => {
return <MDBBtn color='elegant' className='myCustomIcon p-2' />;
};
export default ButtonPage;
or use this button:
<MDBBtn color="elegant"><span className='myCustomIcon'/></MDBBtn>
and my App.css file:
.myCustomIcon {
background: url('./assets/img/React-icon.svg') no-repeat center center;
background-size: contain;
cursor: pointer;
display: inline-block;
min-height: 50px;
min-width: 50px;
}
In this line use your path of svg icon.
background: url('./assets/img/React-icon.svg') no-repeat center center;
Also you can use links:
background: url('https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg') no-repeat center center;
Results: 
Best regards, Konrad.
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 React
- MDB Version: 4.19.0
- Device: MacBookAir
- Browser: Chrome
- OS: Mac
- Provided sample code: No
- Provided link: No