Topic: Provide file path to icon

Palak@tru free asked 3 years ago

How to provide file path (image in SVG format) to MDBIcon?

Konrad Stępień staff answered 3 years ago

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('') no-repeat center center;

Results: Button with svg

Best regards, Konrad.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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