Topic: mdb-icon not displayed

Tenarius free asked 4 years ago

Vue Icons are not displayed

When i try to implement some components from mdbvue-pro in my laravel project, it works fine.

Excepted the icons. They are shown as an little error-symbol: error icon

Its like one of the mdb-docs-examples: (scroll down to the bottom)

i allready implemented import "@fortawesome/fontawesome-free/css/all.min.css"; to my app.js.

My component:

  <mdb-card class="card-image" style="background-image: url(">
    <div class="text-white text-center py-5 px-4 my-5">
        <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h2>
        <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
          optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
        <mdb-btn outline="white" size="md" icon="clone">View project</mdb-btn>
    <mdb-icon fab icon="accusoft" />

  import { mdbCard, mdbBtn, mdbIcon } from 'mdbvue';

  export default {
    name: 'JumbotronPage',
    components: {

Has anyone an idea to solve this problem?

Some Greets

Tenarius free answered 4 years ago

The solution is to define your public path in laravel mix, because xampp use another root-path then php artisan serve.

http://localhost/myproject/public/index.php     //xampp                 //serve

Add to your webpack.mix.js in your root folder:


Thats it.

Magdalena Dembna staff commented 4 years ago

Hi, as I understand you came up with the solution to your issue? We have done only very basic tutorials on laravel-mdbvue integration and in both examples, we used php artisan serve - your example shows there is still much for us to cover in this area. Kind regards, Magdalena

Tenarius free answered 4 years ago

There seems to be a difference between using xampp and php artisan serve. When I use the last one, all icons are displayed correctly.

Does anyone have an idea why?

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 Vue
  • MDB Version: 5.8.2
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: Yes