Edit size of controlls

I copied the example code and added it to our application which renders using a nuxt template. The only additional code is the layout parameter in the exports.

<template>
    <b-container class="main-content" fluid>
      <b-row align-content="center">
        <b-col md="10">
          <mdb-carousel
            :items="6"
            multi
            one
            indicators
            controlls
            leftIcon="angle-double-left"
            rightIcon="angle-double-right"
            navColor="info"
            indicatorsColor="info-color"
            slide
          >
            <template #[i+1] v-for="(img, i) in items">
              <mdb-card :key="i">
                <mdb-card-image :src="img" alt="Card image cap"></mdb-card-image>
                <mdb-card-body class="text-center">
                  <mdb-card-title>{{i+1}}</mdb-card-title>
                  <mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
                  <mdb-btn color="pink" rounded size="md">Button</mdb-btn>
                </mdb-card-body>
              </mdb-card>
            </template>
          </mdb-carousel>
        </b-col>
      </b-row>
    </b-container>
</template>

<script>
    import { mdbCarousel, mdbCard, mdbCardImage, mdbCardText, mdbCardBody } from 'mdbvue';
  export default {
    layout: "home-redesign",
    name: 'CarouselPage',
    components: {
      mdbCarousel, mdbCard, mdbCardImage, mdbCardText, mdbCardBody
    },
    data() {
      return {
        items: [
          "https://mdbootstrap.com/img/Photos/Others/img (36).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img (34).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img (38).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img (29).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img (30).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img (27).jpg"
        ],
      }
    }
  }
</script>

I'm getting an error when I try to upload the picture but the controlls appear how they look in the above pictures.

I have created a test nuxt app with MDB Vue and this code (I've fixed some imports statements) works just fine:

<template>
    <mdb-container class="main-content" fluid>
      <mdb-row align-content="center">
        <mdb-col md="10">
          <mdb-carousel
            :items="6"
            multi
            one
            indicators
            controlls
            leftIcon="angle-double-left"
            rightIcon="angle-double-right"
            navColor="info"
            indicatorsColor="info-color"
            slide
          >
            <template #[i+1] v-for="(img, i) in items">
              <mdb-card :key="i">
                <mdb-card-image :src="img" alt="Card image cap"></mdb-card-image>
                <mdb-card-body class="text-center">
                  <mdb-card-title>{{i+1}}</mdb-card-title>
                  <mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
                  <mdb-btn color="pink" rounded size="md">Button</mdb-btn>
                </mdb-card-body>
              </mdb-card>
            </template>
          </mdb-carousel>
        </mdb-col>
      </mdb-row>
    </mdb-container>
</template>

<script>
    import { mdbCarousel, mdbCol, mdbRow, mdbContainer, mdbCard, mdbCardImage, mdbCardText, mdbCardTitle, mdbBtn, mdbCardBody } from 'mdbvue';
  export default {
    layout: "home-redesign",
    name: 'CarouselPage',
    components: {
      mdbCarousel, mdbCol, mdbRow, mdbContainer, mdbCard, mdbCardImage, mdbCardText, mdbCardTitle, mdbBtn, mdbCardBody
    },
    data() {
      return {
        items: [
          "https://mdbootstrap.com/img/Photos/Others/img(36).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img(34).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img(38).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img(29).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img(30).jpg",
          "https://mdbootstrap.com/img/Photos/Others/img(27).jpg"
        ],
      }
    }
  }
</script>

Inspect the icon element in the dev tools and see which styling is responsible for the font's colour and size - are you using another UI framework as well? Clearly some global styling is interfering with those icons - I couldn't reproduce this issue just with Nuxt and MDB. Best regards, Magdalena

We also use Vuetify for styling in our library and have fontawesome imported for svgs.

I tried inspecting the icon element in dev tools and saw the fontawesome styling affecting the font's color and size. I tried writing a custom style class using the navClass parameter to overwrite the existing styling but that didn't seem to work either. Here is the code I wrote:

<mdb-carousel
          :items="7"
          :interval="5000"
          multi
          one
          leftIcon="chevron-left"
          rightIcon="chevron-right"
          navColor="info"
          indicatorsColor="info-color"
          slide
          indicators
          controlls
          navClass="customNav"
        >

.customNav {
  svg {
    height: 3em !important;
    width: auto !important;
  }
}

The selector you should use instead of svg is i - I've tried changing the colour of the icon in the working example and it worked fine with the following:

  .customNav i {
    color: red;
    font-size: 0.2rem;
  }

Best regards, Magdalena