feat: replace vue icons with outline versions

apps/files/src/components/FileEntry/FileEntryPreview.vue

@@ -57,7 +57,7 @@ import { getSharingToken, isPublicShare } from '@nextcloud/sharing/public'
 import { decode } from 'blurhash'
 import { defineComponent } from 'vue'
 
-import AccountGroupIcon from 'vue-material-design-icons/AccountGroup.vue'
+import AccountGroupIcon from 'vue-material-design-icons/AccountGroupOutline.vue'
 import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
 import FileIcon from 'vue-material-design-icons/File.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'

apps/files/src/components/FileListFilter/FileListFilterModified.vue

@@ -7,7 +7,7 @@
 		:filter-name="t('files', 'Modified')"
 		@reset-filter="resetFilter">
 		<template #icon>
-			<NcIconSvgWrapper :path="mdiCalendarRange" />
+			<NcIconSvgWrapper :path="mdiCalendarRangeOutline" />
 		</template>
 		<NcActionButton v-for="preset of timePresets"
 			:key="preset.id"
@@ -25,7 +25,7 @@
 import type { PropType } from 'vue'
 import type { ITimePreset } from '../../filters/ModifiedFilter.ts'
 
-import { mdiCalendarRange } from '@mdi/js'
+import { mdiCalendarRangeOutline } from '@mdi/js'
 import { translate as t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 
@@ -50,7 +50,7 @@ export default defineComponent({
 	setup() {
 		return {
 			// icons used in template
-			mdiCalendarRange,
+			mdiCalendarRangeOutline,
 		}
 	},
 

apps/files/src/views/FilesList.vue

@@ -176,7 +176,7 @@ import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
-import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
+import AccountPlusIcon from 'vue-material-design-icons/AccountPlusOutline.vue'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import IconReload from 'vue-material-design-icons/Reload.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'

apps/files/src/views/folderTree.ts

@@ -13,7 +13,7 @@ import { isSamePath } from '@nextcloud/paths'
 import { loadState } from '@nextcloud/initial-state'
 
 import FolderSvg from '@mdi/svg/svg/folder.svg?raw'
-import FolderMultipleSvg from '@mdi/svg/svg/folder-multiple.svg?raw'
+import FolderMultipleSvg from '@mdi/svg/svg/folder-multiple-outline.svg?raw'
 
 import {
 	folderTreeId,

apps/files/src/views/personal-files.ts

@@ -8,7 +8,7 @@ import { View, getNavigation } from '@nextcloud/files'
 import { getContents } from '../services/PersonalFiles.ts'
 import { defaultView, hasPersonalFilesView } from '../utils/filesViews.ts'
 
-import AccountIcon from '@mdi/svg/svg/account.svg?raw'
+import AccountIcon from '@mdi/svg/svg/account-outline.svg?raw'
 
 export const VIEW_ID = 'personal'
 

apps/files_sharing/src/components/FileListFilterAccount.vue

@@ -8,7 +8,7 @@
 		:filter-name="t('files_sharing', 'People')"
 		@reset-filter="resetFilter">
 		<template #icon>
-			<NcIconSvgWrapper :path="mdiAccountMultiple" />
+			<NcIconSvgWrapper :path="mdiAccountMultipleOutline" />
 		</template>
 		<NcActionInput v-if="availableAccounts.length > 1"
 			:label="t('files_sharing', 'Filter accounts')"
@@ -39,7 +39,7 @@
 import type { IAccountData } from '../files_filters/AccountFilter.ts'
 
 import { translate as t } from '@nextcloud/l10n'
-import { mdiAccountMultiple } from '@mdi/js'
+import { mdiAccountMultipleOutline } from '@mdi/js'
 import { computed, ref, watch } from 'vue'
 
 import FileListFilter from '../../../files/src/components/FileListFilter/FileListFilter.vue'

apps/files_sharing/src/components/NewFileRequestDialog/NewFileRequestDialogIntro.vue

@@ -78,7 +78,7 @@ import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import IconFolder from 'vue-material-design-icons/Folder.vue'
-import IconInfo from 'vue-material-design-icons/Information.vue'
+import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
 import IconLock from 'vue-material-design-icons/Lock.vue'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import NcTextField from '@nextcloud/vue/components/NcTextField'

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -243,10 +243,10 @@ import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 
 import Tune from 'vue-material-design-icons/Tune.vue'
-import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
+import IconCalendarBlank from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconQr from 'vue-material-design-icons/Qrcode.vue'
 import ErrorIcon from 'vue-material-design-icons/Exclamation.vue'
-import LockIcon from 'vue-material-design-icons/Lock.vue'
+import LockIcon from 'vue-material-design-icons/LockOutline.vue'
 import CheckIcon from 'vue-material-design-icons/CheckBold.vue'
 import ClipboardIcon from 'vue-material-design-icons/ContentCopy.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'

apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue

@@ -36,7 +36,7 @@ import ShareDetails from '../mixins/ShareDetails.js'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import IconEyeOutline from 'vue-material-design-icons/EyeOutline.vue'
-import IconPencil from 'vue-material-design-icons/Pencil.vue'
+import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
 import IconFileUpload from 'vue-material-design-icons/FileUpload.vue'
 import IconTune from 'vue-material-design-icons/Tune.vue'
 

apps/files_sharing/src/files_views/shares.ts

@@ -6,11 +6,11 @@ import { translate as t } from '@nextcloud/l10n'
 import { View, getNavigation } from '@nextcloud/files'
 import { ShareType } from '@nextcloud/sharing'
 import AccountClockSvg from '@mdi/svg/svg/account-clock.svg?raw'
-import AccountGroupSvg from '@mdi/svg/svg/account-group.svg?raw'
-import AccountPlusSvg from '@mdi/svg/svg/account-plus.svg?raw'
+import AccountGroupSvg from '@mdi/svg/svg/account-group-outline.svg?raw'
+import AccountPlusSvg from '@mdi/svg/svg/account-plus-outline.svg?raw'
 import AccountSvg from '@mdi/svg/svg/account.svg?raw'
 import DeleteSvg from '@mdi/svg/svg/delete.svg?raw'
-import FileUploadSvg from '@mdi/svg/svg/file-upload.svg?raw'
+import FileUploadSvg from '@mdi/svg/svg/file-upload-outline.svg?raw'
 import LinkSvg from '@mdi/svg/svg/link.svg?raw'
 
 import { getContents, isFileRequest } from '../services/SharingService'

apps/files_sharing/src/views/FilesViewFileDropEmptyContent.vue

@@ -68,7 +68,7 @@ import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import svgCloudUpload from '@mdi/svg/svg/cloud-upload.svg?raw'
+import svgCloudUpload from '@mdi/svg/svg/cloud-upload-outline.svg?raw'
 
 defineProps<{
 	foldername: string

apps/files_sharing/src/views/SharingDetailsTab.vue

@@ -281,7 +281,7 @@ import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 
 import CircleIcon from 'vue-material-design-icons/CircleOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
-import EditIcon from 'vue-material-design-icons/Pencil.vue'
+import EditIcon from 'vue-material-design-icons/PencilOutline.vue'
 import EmailIcon from 'vue-material-design-icons/Email.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
 import GroupIcon from 'vue-material-design-icons/AccountGroup.vue'

apps/files_sharing/src/views/SharingTab.vue

@@ -164,7 +164,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { ShareType } from '@nextcloud/sharing'
 
-import InfoIcon from 'vue-material-design-icons/Information.vue'
+import InfoIcon from 'vue-material-design-icons/InformationOutline.vue'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
 
 import axios from '@nextcloud/axios'

apps/files_trashbin/src/files_views/trashbinView.ts

@@ -7,7 +7,7 @@ import { t } from '@nextcloud/l10n'
 import { deleted, deletedBy, originalLocation } from './columns.ts'
 import { getContents } from '../services/trashbin.ts'
 
-import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+import svgDelete from '@mdi/svg/svg/delete-outline.svg?raw'
 
 export const TRASHBIN_VIEW_ID = 'trashbin'
 

apps/files_versions/src/components/Version.vue

@@ -137,7 +137,7 @@ import Delete from 'vue-material-design-icons/Delete.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import FileCompare from 'vue-material-design-icons/FileCompare.vue'
 import ImageOffOutline from 'vue-material-design-icons/ImageOffOutline.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Pencil from 'vue-material-design-icons/PencilOutline.vue'
 
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'

apps/oauth2/src/components/OAuthItem.vue

@@ -35,7 +35,7 @@
 
 <script>
 
-import Delete from 'vue-material-design-icons/Delete.vue'
+import Delete from 'vue-material-design-icons/DeleteOutline.vue'
 import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 

apps/profile/src/views/Profile.vue

@@ -134,9 +134,9 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcRichText from '@nextcloud/vue/components/NcRichText'
-import AccountIcon from 'vue-material-design-icons/Account.vue'
+import AccountIcon from 'vue-material-design-icons/AccountOutline.vue'
 import MapMarkerIcon from 'vue-material-design-icons/MapMarker.vue'
-import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
 
 interface IProfileAction {
 	target: string

apps/settings/src/components/AppList/AppLevelBadge.vue

@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 
-import { mdiCheck, mdiStarShooting } from '@mdi/js'
+import { mdiCheck, mdiStarShootingOutline } from '@mdi/js'
 import { translate as t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 
@@ -28,7 +28,7 @@ const props = defineProps<{
 
 const isSupported = computed(() => props.level === 300)
 const isFeatured = computed(() => props.level === 200)
-const badgeIcon = computed(() => isSupported.value ? mdiStarShooting : mdiCheck)
+const badgeIcon = computed(() => isSupported.value ? mdiStarShootingOutline : mdiCheck)
 const badgeText = computed(() => isSupported.value ? t('settings', 'Supported') : t('settings', 'Featured'))
 const badgeTitle = computed(() => isSupported.value
 	? t('settings', 'This app is supported via your current Nextcloud subscription.')

apps/settings/src/components/AppNavigationGroupList.vue

@@ -18,7 +18,7 @@
 			<template v-if="isAdminOrDelegatedAdmin" #actions>
 				<NcActionText>
 					<template #icon>
-						<NcIconSvgWrapper :path="mdiAccountGroup" />
+						<NcIconSvgWrapper :path="mdiAccountGroupOutline" />
 					</template>
 					{{ t('settings', 'Create group') }}
 				</NcActionText>
@@ -60,7 +60,7 @@
 import type CancelablePromise from 'cancelable-promise'
 import type { IGroup } from '../views/user-types.d.ts'
 
-import { mdiAccountGroup, mdiPlus } from '@mdi/js'
+import { mdiAccountGroupOutline, mdiPlus } from '@mdi/js'
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { useElementVisibility } from '@vueuse/core'

apps/settings/src/components/AppStoreDiscover/AppStoreDiscoverSection.vue

@@ -8,7 +8,7 @@
 			:name="t('settings', 'Nothing to show')"
 			:description="t('settings', 'Could not load section content from app store.')">
 			<template #icon>
-				<NcIconSvgWrapper :path="mdiEyeOff" :size="64" />
+				<NcIconSvgWrapper :path="mdiEyeOffOutline" :size="64" />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="elements.length === 0"
@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import type { IAppDiscoverElements } from '../../constants/AppDiscoverTypes.ts'
 
-import { mdiEyeOff } from '@mdi/js'
+import { mdiEyeOffOutline } from '@mdi/js'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'

apps/settings/src/components/AppStoreSidebar/AppDeployOptionsModal.vue

@@ -65,7 +65,7 @@
 						style="margin-top: 6px;"
 						@click="removeMount(mount)">
 						<template #icon>
-							<NcIconSvgWrapper :path="mdiDelete" />
+							<NcIconSvgWrapper :path="mdiDeleteOutline" />
 						</template>
 					</NcButton>
 				</div>
@@ -160,7 +160,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 
-import { mdiPlus, mdiCheck, mdiClose, mdiDelete } from '@mdi/js'
+import { mdiPlus, mdiCheck, mdiClose, mdiDeleteOutline } from '@mdi/js'
 
 import { useAppApiStore } from '../../store/app-api-store.ts'
 import { useAppsStore } from '../../store/apps-store.ts'
@@ -216,7 +216,7 @@ export default {
 			mdiPlus,
 			mdiCheck,
 			mdiClose,
-			mdiDelete,
+			mdiDeleteOutline,
 		}
 	},
 	data() {

apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue

@@ -8,7 +8,7 @@
 		:name="t('settings', 'Details')"
 		:order="1">
 		<template #icon>
-			<NcIconSvgWrapper :path="mdiTextBox" />
+			<NcIconSvgWrapper :path="mdiTextBoxOutline" />
 		</template>
 		<div class="app-details">
 			<div class="app-details__actions">
@@ -82,7 +82,7 @@
 						type="secondary"
 						@click="() => showDeployOptionsModal = true">
 						<template #icon>
-							<NcIconSvgWrapper :path="mdiToyBrickPlus" />
+							<NcIconSvgWrapper :path="mdiToyBrickPlusOutline" />
 						</template>
 						{{ t('settings', 'Deploy options') }}
 					</NcButton>
@@ -162,23 +162,23 @@
 						:aria-label="t('settings', 'Report a bug')"
 						:title="t('settings', 'Report a bug')">
 						<template #icon>
-							<NcIconSvgWrapper :path="mdiBug" />
+							<NcIconSvgWrapper :path="mdiBugOutline" />
 						</template>
 					</NcButton>
 					<NcButton :disabled="!app.bugs"
 						:href="app.bugs ?? '#'"
 						:aria-label="t('settings', 'Request feature')"
 						:title="t('settings', 'Request feature')">
 						<template #icon>
-							<NcIconSvgWrapper :path="mdiFeatureSearch" />
+							<NcIconSvgWrapper :path="mdiFeatureSearchOutline" />
 						</template>
 					</NcButton>
 					<NcButton v-if="app.appstoreData?.discussion"
 						:href="app.appstoreData.discussion"
 						:aria-label="t('settings', 'Ask questions or discuss')"
 						:title="t('settings', 'Ask questions or discuss')">
 						<template #icon>
-							<NcIconSvgWrapper :path="mdiTooltipQuestion" />
+							<NcIconSvgWrapper :path="mdiTooltipQuestionOutline" />
 						</template>
 					</NcButton>
 					<NcButton v-if="!app.internal"
@@ -209,7 +209,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwit
 import AppDeployOptionsModal from './AppDeployOptionsModal.vue'
 
 import AppManagement from '../../mixins/AppManagement.js'
-import { mdiBug, mdiFeatureSearch, mdiStar, mdiTextBox, mdiTooltipQuestion, mdiToyBrickPlus } from '@mdi/js'
+import { mdiBugOutline, mdiFeatureSearchOutline, mdiStar, mdiTextBoxOutline, mdiTooltipQuestionOutline, mdiToyBrickPlusOutline } from '@mdi/js'
 import { useAppsStore } from '../../store/apps-store'
 import { useAppApiStore } from '../../store/app-api-store'
 
@@ -242,12 +242,12 @@ export default {
 			store,
 			appApiStore,
 
-			mdiBug,
-			mdiFeatureSearch,
+			mdiBugOutline,
+			mdiFeatureSearchOutline,
 			mdiStar,
-			mdiTextBox,
-			mdiTooltipQuestion,
-			mdiToyBrickPlus,
+			mdiTextBoxOutline,
+			mdiTooltipQuestionOutline,
+			mdiToyBrickPlusOutline,
 		}
 	},
 

apps/settings/src/components/AuthToken.vue

@@ -80,7 +80,7 @@
 import type { PropType } from 'vue'
 import type { IToken } from '../store/authtoken'
 
-import { mdiCheck, mdiCellphone, mdiTablet, mdiMonitor, mdiWeb, mdiKey, mdiMicrosoftEdge, mdiFirefox, mdiGoogleChrome, mdiAppleSafari, mdiAndroid, mdiAppleIos } from '@mdi/js'
+import { mdiCheck, mdiCellphone, mdiTablet, mdiMonitor, mdiWeb, mdiKeyOutline, mdiMicrosoftEdge, mdiFirefox, mdiGoogleChrome, mdiAppleSafari, mdiAndroid, mdiAppleIos } from '@mdi/js'
 import { translate as t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
@@ -215,7 +215,7 @@ export default defineComponent({
 		tokenIcon() {
 			// For custom created app tokens / app passwords
 			if (this.token.type === TokenType.PERMANENT_TOKEN) {
-				return mdiKey
+				return mdiKeyOutline
 			}
 
 			switch (this.client?.id) {

apps/settings/src/components/GroupListItem.vue

@@ -80,9 +80,9 @@ import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 
-import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
+import AccountGroup from 'vue-material-design-icons/AccountGroupOutline.vue'
+import Delete from 'vue-material-design-icons/DeleteOutline.vue'
+import Pencil from 'vue-material-design-icons/PencilOutline.vue'
 
 import { showError } from '@nextcloud/dialogs'
 

apps/settings/src/components/PersonalInfo/AvatarSection.vue

@@ -88,7 +88,7 @@ import 'cropperjs/dist/cropper.css'
 
 import Upload from 'vue-material-design-icons/Upload.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import Delete from 'vue-material-design-icons/DeleteOutline.vue'
 
 import HeaderBar from './shared/HeaderBar.vue'
 import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'

apps/settings/src/components/PersonalInfo/DetailsSection.vue

@@ -36,7 +36,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
 import NcProgressBar from '@nextcloud/vue/components/NcProgressBar'
-import Account from 'vue-material-design-icons/Account.vue'
+import Account from 'vue-material-design-icons/AccountOutline.vue'
 import CircleSlice from 'vue-material-design-icons/CircleSlice3.vue'
 
 import HeaderBar from './shared/HeaderBar.vue'