title: How to toggle Vuetify Carousel component right/left arrows on and off
body: <p>I want to dynamically control the visibility of the <code>(&lt;)</code> and <code>(&gt;)</code> arrows in the <a href="https://vuetifyjs.com/en/components/carousels#carousels" rel="nofollow noreferrer">Vuetify carousel component</a>.</p>
  
  <p>For example, so that the final right arrow on the last item disappears, or so that I can use internal buttons or other interactivity within the <code>carousel-item</code> content to replace the buttons dynamically. (I know the <code>continuous</code> prop can do the simple end case).</p>
  
  <p>The documentation for the <code>next-icon</code> and <code>prev-icon</code> prop is <code>bool</code> or <code>string</code> and the default says <code>$next</code>.</p>
  
  <blockquote>
  <pre><code>Name    next-icon
  Type    boolean | string
  Default $next
  Description Icon used for the "next" button if show-arrows is true
  </code></pre>
  </blockquote>
  
  <p>I can make the icon button disappear by setting it to <code>false</code>, but <code>true</code> doesn't make it reappear.</p>
  
  <p>I'm guessing the string value is the icon name (like <code>md-arrow-right</code>?) but the documentation doesn't say what the default is, and that doesn't work. I'm guessing that "off" is setting the prop to <code>false</code> and "on" is restoring it to the icon name.</p>
  
  <p>I also don't understand what <code>$next</code> means, and this isn't explained in the page. It errors if you use that as a value. Everything else seems to evaluate to false.</p>
  
  <p>I'm guessing it's something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-carousel v-model="stepNo" :show-arrows="show.arrows" :next-icon="show.nextArrow" height="auto" light&gt;
    &lt;!-- ... --&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data: () =&gt; {
      return {
        stepNo: 0,
        show: {
          arrows: true,
          nextArrow: "md-arrow-right",
        },
      }
    },
    watch: {
      stepNo: function(newStep, oldStep) {
        // some logic here, for example
        this.nextArrow = (newStep === 4) ? "md-arrow-right" : false;
      },
    },
    //...
  }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>UPDATE</p>
  
  <p>One of my mistakes was <code>md-arrow-right</code> should be <code>mdi-arrow-right</code> (missing the <code>i</code>), or actually <code>mdi-chevron-right</code> as noted by tony19. So I can now set it to a literal icon OK.</p>
  
  <p>But setting it to <code>$next</code> or <code>$prev</code> still doesn't work - it displays either nothing, and empty circle, or a $ sign which is actually the word <code>$next</code>. And this seems to "break" the binding and setting it to a literal icon after this, fails until reloading the page.</p>
  
  <pre><code>&lt;i aria-hidden="true" class="v-icon notranslate material-icons theme--light" style="font-size: 36px;"&gt;$next&lt;/i&gt;
  </code></pre>