Using Icons from Libraries

Vue PDF Viewer allows you to fully customize the icons in its interface, making it a highly adaptable tool for various applications. Whether you’re using Quasar, Bootstrap, or another UI library, the flexibility to replace default icons ensures seamless integration with your application’s design.

This guide will demonstrate how to use custom icons in Vue PDF Viewer, starting with Quasar and Font Awesome.

Tutorial for Using Icons from Quasar

Here is how you can add icons from Font Awesome with the use of Quasar to customize the Viewer's interface.

Step 1: Import icons from Quasar

In this example, we will import the Font Awesome icons that are packaged in Quasar.

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";
</script>

vue

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";
</script>

vue

<script lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";

export default {
  components: { VPdfViewer },
  data() {
    return {
      src: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
      icons: {
        fasPrint,
        fasExpand,
        fasArrowDown,
        fasArrowUp,
        fasMagnifyingGlassMinus,
        fasMagnifyingGlassPlus,
        fasMoon,
        farSun,
        farFile,
        fasDownload,
        fasBars,
        fasUpLong,
        fasDownLong,
        fasRotateRight,
        fasRotateLeft,
        fasArrowPointer,
        farHand,
        farSquare,
        farWindowMaximize,
        fasArrowsUpDown,
        fasGripVertical,
        fasRulerVertical,
        fasRulerHorizontal,
        fasCircleInfo,
        fasMagnifyingGlass,
      },
    };
  },
};
</script>

vue

<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";

export default {
  components: { VPdfViewer },
  data() {
    return {
      src: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
      icons: {
        fasPrint,
        fasExpand,
        fasArrowDown,
        fasArrowUp,
        fasMagnifyingGlassMinus,
        fasMagnifyingGlassPlus,
        fasMoon,
        farSun,
        farFile,
        fasDownload,
        fasBars,
        fasUpLong,
        fasDownLong,
        fasRotateRight,
        fasRotateLeft,
        fasArrowPointer,
        farHand,
        farSquare,
        farWindowMaximize,
        fasArrowsUpDown,
        fasGripVertical,
        fasRulerVertical,
        fasRulerHorizontal,
        fasCircleInfo,
        fasMagnifyingGlass,
      },
    };
  },
};
</script>

Step 2: Customize icons using slots

Use slots to replace the default icons in specific sections of the PDF Viewer, such as the sidebar, top bar, and "More Options" menu.

Learn more about using Slots - Icons.

Composition TSComposition JSOptions TSOptions JS

vue

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
    >
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="farSun" /></template>
      <template #iconOpenFile><q-icon :name="farFile" /></template>
      <template #iconDownload><q-icon :name="fasDownload" /></template>
      <template #iconPrint><q-icon :name="fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

vue

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
    >
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="farSun" /></template>
      <template #iconOpenFile><q-icon :name="farFile" /></template>
      <template #iconDownload><q-icon :name="fasDownload" /></template>
      <template #iconPrint><q-icon :name="fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

vue

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="src">
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="icons.fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="icons.fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="icons.fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="icons.fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="icons.fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="icons.fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="icons.fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="icons.farSun" /></template>
      <template #iconOpenFile><q-icon :name="icons.farFile" /></template>
      <template #iconDownload><q-icon :name="icons.fasDownload" /></template>
      <template #iconPrint><q-icon :name="icons.fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="icons.fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="icons.fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="icons.fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="icons.fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="icons.fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="icons.fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="icons.farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="icons.farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="icons.farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="icons.fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="icons.fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="icons.fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="icons.fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="icons.fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

vue

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="src">
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="icons.fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="icons.fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="icons.fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="icons.fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="icons.fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="icons.fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="icons.fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="icons.farSun" /></template>
      <template #iconOpenFile><q-icon :name="icons.farFile" /></template>
      <template #iconDownload><q-icon :name="icons.fasDownload" /></template>
      <template #iconPrint><q-icon :name="icons.fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="icons.fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="icons.fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="icons.fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="icons.fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="icons.fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="icons.fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="icons.farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="icons.farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="icons.farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="icons.fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="icons.fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="icons.fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="icons.fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="icons.fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

Tutorial for Using Icons from Quasar - Top bar and Sidebar

Step 3: Customize CSS (Optional)

You can also add custom CSS to further adjust the icon appearance. All icons in Vue PDF Viewer can be customized using CSS.

html

<style>
.custom-icon {
  margin-right: 6px;
}
</style>

Here is a full code example:

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
    >
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="farSun" /></template>
      <template #iconOpenFile><q-icon :name="farFile" /></template>
      <template #iconDownload><q-icon :name="fasDownload" /></template>
      <template #iconPrint><q-icon :name="fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

<style>
.custom-icon {
  margin-right: 6px;
}
</style>

vue

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
    >
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="farSun" /></template>
      <template #iconOpenFile><q-icon :name="farFile" /></template>
      <template #iconDownload><q-icon :name="fasDownload" /></template>
      <template #iconPrint><q-icon :name="fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

<style>
.custom-icon {
  margin-right: 6px;
}
</style>

vue

<script lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";

export default {
  components: { VPdfViewer },
  data() {
    return {
      src: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
      icons: {
        fasPrint,
        fasExpand,
        fasArrowDown,
        fasArrowUp,
        fasMagnifyingGlassMinus,
        fasMagnifyingGlassPlus,
        fasMoon,
        farSun,
        farFile,
        fasDownload,
        fasBars,
        fasUpLong,
        fasDownLong,
        fasRotateRight,
        fasRotateLeft,
        fasArrowPointer,
        farHand,
        farSquare,
        farWindowMaximize,
        fasArrowsUpDown,
        fasGripVertical,
        fasRulerVertical,
        fasRulerHorizontal,
        fasCircleInfo,
        fasMagnifyingGlass,
      },
    };
  },
};
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="src">
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="icons.fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="icons.fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="icons.fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="icons.fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="icons.fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="icons.fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="icons.fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="icons.farSun" /></template>
      <template #iconOpenFile><q-icon :name="icons.farFile" /></template>
      <template #iconDownload><q-icon :name="icons.fasDownload" /></template>
      <template #iconPrint><q-icon :name="icons.fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="icons.fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="icons.fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="icons.fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="icons.fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="icons.fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="icons.fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="icons.farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="icons.farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="icons.farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="icons.fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="icons.fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="icons.fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="icons.fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="icons.fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

<style>
.custom-icon {
  margin-right: 6px;
}
</style>

vue

<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import {
  fasPrint,
  fasExpand,
  fasArrowDown,
  fasArrowUp,
  fasMagnifyingGlassMinus,
  fasMagnifyingGlassPlus,
  fasMoon,
  farSun,
  farFile,
  fasDownload,
  fasBars,
  fasUpLong,
  fasDownLong,
  fasRotateRight,
  fasRotateLeft,
  fasArrowPointer,
  farHand,
  farSquare,
  farWindowMaximize,
  fasArrowsUpDown,
  fasGripVertical,
  fasRulerVertical,
  fasRulerHorizontal,
  fasCircleInfo,
  fasMagnifyingGlass,
} from "@quasar/extras/fontawesome-v6";

export default {
  components: { VPdfViewer },
  data() {
    return {
      src: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
      icons: {
        fasPrint,
        fasExpand,
        fasArrowDown,
        fasArrowUp,
        fasMagnifyingGlassMinus,
        fasMagnifyingGlassPlus,
        fasMoon,
        farSun,
        farFile,
        fasDownload,
        fasBars,
        fasUpLong,
        fasDownLong,
        fasRotateRight,
        fasRotateLeft,
        fasArrowPointer,
        farHand,
        farSquare,
        farWindowMaximize,
        fasArrowsUpDown,
        fasGripVertical,
        fasRulerVertical,
        fasRulerHorizontal,
        fasCircleInfo,
        fasMagnifyingGlass,
      },
    };
  },
};
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="src">
      <!-- Sidebar -->
      <template #iconThumbnail><q-icon :name="icons.fasBars" /></template>

      <!-- Top bar(left) -->
      <template #iconSearch>
        <q-icon :name="icons.fasMagnifyingGlass" />
      </template>
      <template #iconPrevPage><q-icon :name="icons.fasArrowUp" /></template>
      <template #iconNextPage><q-icon :name="icons.fasArrowDown" /></template>

      <!-- Top bar(center) -->
      <template #iconZoomOut>
        <q-icon :name="icons.fasMagnifyingGlassMinus" />
      </template>
      <template #iconZoomIn>
        <q-icon :name="icons.fasMagnifyingGlassPlus" />
      </template>

      <!-- Top bar(right) -->
      <template #iconThemeDark><q-icon :name="icons.fasMoon" /></template>
      <template #iconThemeLight><q-icon :name="icons.farSun" /></template>
      <template #iconOpenFile><q-icon :name="icons.farFile" /></template>
      <template #iconDownload><q-icon :name="icons.fasDownload" /></template>
      <template #iconPrint><q-icon :name="icons.fasPrint" /></template>
      <template #iconFullScreen><q-icon :name="icons.fasExpand" /></template>

      <!-- More options -->
      <template #iconFirstPage>
        <q-icon :name="icons.fasUpLong" class="custom-icon" />
      </template>
      <template #iconLastPage>
        <q-icon :name="icons.fasDownLong" class="custom-icon" />
      </template>
      <template #iconRotateClockwise>
        <q-icon :name="icons.fasRotateRight" class="custom-icon" />
      </template>
      <template #iconRotateCounterClockwise>
        <q-icon :name="icons.fasRotateLeft" class="custom-icon" />
      </template>
      <template #iconTextSelection>
        <q-icon :name="icons.fasArrowPointer" class="custom-icon" />
      </template>
      <template #iconHandMode>
        <q-icon :name="icons.farHand" class="custom-icon" />
      </template>
      <template #iconPageViewSingle>
        <q-icon :name="icons.farSquare" class="custom-icon" />
      </template>
      <template #iconPageViewDual>
        <q-icon :name="icons.farWindowMaximize" class="custom-icon" />
      </template>
      <template #iconScrollingPage>
        <q-icon :name="icons.fasArrowsUpDown" class="custom-icon" />
      </template>
      <template #iconScrollingVertical>
        <q-icon :name="icons.fasRulerVertical" class="custom-icon" />
      </template>
      <template #iconScrollingHorizontal>
        <q-icon :name="icons.fasRulerHorizontal" class="custom-icon" />
      </template>
      <template #iconScrollingWrapped>
        <q-icon :name="icons.fasGripVertical" class="custom-icon" />
      </template>
      <template #iconDocProperties>
        <q-icon :name="icons.fasCircleInfo" class="custom-icon" />
      </template>
    </VPdfViewer>
  </div>
</template>

<style>
.custom-icon {
  margin-right: 6px;
}
</style>

Events

Slots

Slots - Tools

Interfaces

Using Icons from Libraries

Tutorial for Using Icons from Quasar

Step 1: Import icons from Quasar

Step 2: Customize icons using slots

Step 3: Customize CSS (Optional)

Slots - Tools

Using Icons from Libraries ​

Tutorial for Using Icons from Quasar ​

Step 1: Import icons from Quasar ​

Step 2: Customize icons using slots ​

Step 3: Customize CSS (Optional) ​

Using Icons from Libraries

Tutorial for Using Icons from Quasar

Step 1: Import icons from Quasar

Step 2: Customize icons using slots

Step 3: Customize CSS (Optional)