@angular/material/icon#MatIconRegistry TypeScript Examples

The following examples show how to use @angular/material/icon#MatIconRegistry. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: app.component.ts From svg-path-editor with Apache License 2.0

6 votes

constructor(
    matRegistry: MatIconRegistry,
    sanitizer: DomSanitizer,
    public cfg: ConfigService,
    private storage: StorageService
  ) {
    (window as any).browserComputePathBoundingBox = browserComputePathBoundingBox;
    for (const icon of ['delete', 'logo', 'more', 'github', 'zoom_in', 'zoom_out', 'zoom_fit', 'sponsor']) {
      matRegistry.addSvgIcon(icon, sanitizer.bypassSecurityTrustResourceUrl(`./assets/${icon}.svg`));
    }
    this.parsedPath = new Svg('');
    this.reloadPath(this.rawPath, true);
  }

Example #2

Source File: period-selector.component.ts From budget-angular with GNU General Public License v3.0

6 votes

constructor(
    periodService: PeriodService,
    iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer
  ) {
    iconRegistry.addSvgIcon(
      "left",
      sanitizer.bypassSecurityTrustResourceUrl("assets/left.svg")
    );
    iconRegistry.addSvgIcon(
      "right",
      sanitizer.bypassSecurityTrustResourceUrl("assets/right.svg")
    );

    this.month = periodService.getCurrentPeriod().month;
    this.year = periodService.getCurrentPeriod().year;
  }

Example #3

Source File: app.component.ts From capture-lite with GNU General Public License v3.0

6 votes

constructor(
    private readonly platform: Platform,
    private readonly collectorService: CollectorService,
    private readonly iconRegistry: MatIconRegistry,
    private readonly sanitizer: DomSanitizer,
    private readonly capacitorFactsProvider: CapacitorFactsProvider,
    private readonly webCryptoApiSignatureProvider: WebCryptoApiSignatureProvider,
    private readonly captureService: CaptureService,
    private readonly cameraService: CameraService,
    private readonly errorService: ErrorService,
    notificationService: NotificationService,
    pushNotificationService: PushNotificationService,
    langaugeService: LanguageService,
    diaBackendAuthService: DiaBackendAuthService,
    diaBackendNotificationService: DiaBackendNotificationService,
    uploadService: DiaBackendAssetUploadingService
  ) {
    notificationService.requestPermission();
    pushNotificationService.register();
    langaugeService.initialize();
    diaBackendAuthService.initialize$().pipe(untilDestroyed(this)).subscribe();
    uploadService.initialize$().pipe(untilDestroyed(this)).subscribe();
    diaBackendNotificationService
      .initialize$()
      .pipe(untilDestroyed(this))
      .subscribe();
    this.initializeApp();
    this.restoreAppState();
    this.initializeCollector();
    this.registerIcon();
  }

Example #4

Source File: wallets.page.ts From capture-lite with GNU General Public License v3.0

6 votes

constructor(
    private readonly diaBackendWalletService: DiaBackendWalletService,
    private readonly diaBackendAuthService: DiaBackendAuthService,
    private readonly matIconRegistry: MatIconRegistry,
    private readonly domSanitizer: DomSanitizer,
    private readonly snackBar: MatSnackBar,
    private readonly translocoService: TranslocoService,
    private readonly webCryptoApiSignatureProvider: WebCryptoApiSignatureProvider,
    private readonly confirmAlert: ConfirmAlert,
    private readonly dialog: MatDialog,
    private readonly errorService: ErrorService,
    private readonly router: Router
  ) {
    this.matIconRegistry.addSvgIcon(
      'wallet',
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        '../../../assets/images/wallet.svg'
      )
    );

    combineLatest([this.bscNumBalance$, this.points$])
      .pipe(
        first(),
        map(
          ([bscNumBalance, points]) => Number(bscNumBalance) + Number(points)
        ),
        untilDestroyed(this)
      )
      .subscribe(totalBalance => this.totalBalance$.next(totalBalance));
  }

Example #5

Source File: app.component.ts From sdkgen with MIT License

6 votes

constructor(
    public sdkgen: SdkgenService,
    private domSanitizer: DomSanitizer,
    private matIconRegistry: MatIconRegistry,
  ) {
    for (const icon of ["typescript", "dot-net", "kotlin", "swift", "dart"]) {
      this.matIconRegistry.addSvgIcon(icon, this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/${icon}.svg`));
    }
  }

Example #6

Source File: app.component.ts From yii-debug-frontend with BSD 3-Clause "New" or "Revised" License

6 votes

constructor(
        private errorService: ErrorService,
        private snackBar: MatSnackBar,
        private iconRegistry: MatIconRegistry,
        private sanitizer: DomSanitizer,
    ) {
        iconRegistry.addSvgIcon(
            'check',
            sanitizer.bypassSecurityTrustResourceUrl('assets/img/yes-icon.svg'),
        );
        iconRegistry.addSvgIcon(
            'ban',
            sanitizer.bypassSecurityTrustResourceUrl('assets/img/no-icon.svg'),
        );
        this.initializeErrors();
    }

Example #7

Source File: app.component.ts From gnosis.1inch.exchange with MIT License

5 votes

constructor(
        private oneInchApiService: OneInchApiService,
        private gnosisService: GnosisService,
        private tokenPriceService: TokenPriceService,
        public tokenService: TokenService,
        private ethereumService: EthereumService,
        iconRegistry: MatIconRegistry,
        sanitizer: DomSanitizer
    ) {

        iconRegistry.addSvgIcon('settings', sanitizer.bypassSecurityTrustResourceUrl('assets/settings.svg'));
        iconRegistry.addSvgIcon('swap', sanitizer.bypassSecurityTrustResourceUrl('assets/swap.svg'));

        // need to subscribe before addListener
        this.gnosisService.walletAddress$.subscribe();
        // this.gnosisService.isMainNet$.subscribe(console.log);

        this.sortedTokens$ = this.gnosisService.walletAddress$.pipe(
            switchMap((walletAddress) => {
                return combineLatest([
                    this.tokenService.getSortedTokens(walletAddress),
                    this.tokenService.tokenHelper$
                ]);
            }),
            map(([tokens, tokenHelper]) => {

                this.updateFromAmountValidator(tokenHelper);
                this.openLoader = false;
                return tokens;
            }),
            shareReplay({bufferSize: 1, refCount: true})
        );

        this.filteredFromTokens$ = this.getFilteredTokens(this.autoCompleteCtrlFromToken);
        this.filteredToTokens$ = this.getFilteredTokens(this.autoCompleteCtrlToToken);

        this.swapForm.controls.fromAmount.setValue(this.fromAmount, {emitEvent: false});

        const fromAmountChange$ = this.swapForm.controls.fromAmount.valueChanges.pipe(
            startWith(this.fromAmount),
            debounceTime(200),
            distinctUntilChanged(),
            map((value: string) => ({
                fromAmount: value,
                resetFields: true
            }))
        );

        const fromAmountListener$ = merge(fromAmountChange$, this.updateAmounts.asObservable())
            .pipe(
                switchMap((({fromAmount}) => {
                    return this.setAmounts(fromAmount).pipe(
                        // background refresh
                        repeatWhen((completed) => completed.pipe(delay(20000)))
                    );
                }))
            );

        this.subscription.add(fromAmountListener$.subscribe());
        this.gnosisService.addListeners();
    }

Example #8

Source File: app.component.ts From App with MIT License

5 votes

constructor(
		@Inject(PLATFORM_ID) platformId: any,
		iconRegistry: MatIconRegistry,
		sanitizer: DomSanitizer,
		appService: AppService,
		titleService: Title,
		localStorageSvc: LocalStorageService,
		private windowRef: WindowRef,
		private sw: SwUpdate,
		private dialog: MatDialog,
		private location: Location,
		private router: Router,
		private overlayRef: OverlayContainer,
		public viewportService: ViewportService
	) {
		// Check if platform is browser
		AppComponent.isBrowser.next(isPlatformBrowser(platformId));

		for (const iconRef of iconList) {
			iconRegistry.addSvgIcon(
				iconRef[0],
				sanitizer.bypassSecurityTrustResourceUrl(`assets/${iconRef[1]}`)
			);
		}

		// Set page title
		{
			router.events.pipe( // Handle "ActivationStart" router event
				filter(ev => ev instanceof ActivationStart),
				map(ev => ev as ActivationStart),

				// Find variables and omit them from the title.
				// Components can call AppService.pushTitleAttributes() to update them
				tap(ev => {
					const title: string = '7TV - ' + (ev.snapshot.data?.title ?? 'Untitled Page' as string);

					appService.pageTitleSnapshot = String(title);
					titleService.setTitle(`${title?.replace(AppService.PAGE_ATTR_REGEX, '')}`);
				})
			).subscribe();
		}

		this.setTheme();

		if (isPlatformBrowser(platformId)) {
			localStorageSvc.storage = localStorage;
		}
	}

Example #9

Source File: icon.service.ts From WowUp with GNU General Public License v3.0

5 votes

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

Example #10

Source File: layout.component.ts From budget-angular with GNU General Public License v3.0

5 votes

constructor(
    private cdr: ChangeDetectorRef,
    private location: Location,
    private authService: AuthService,
    private router: Router,
    iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer
  ) {
    iconRegistry.addSvgIcon(
      "home",
      sanitizer.bypassSecurityTrustResourceUrl("assets/home.svg")
    );
    iconRegistry.addSvgIcon(
      "list",
      sanitizer.bypassSecurityTrustResourceUrl("assets/list.svg")
    );
    iconRegistry.addSvgIcon(
      "settings",
      sanitizer.bypassSecurityTrustResourceUrl("assets/settings.svg")
    );
    iconRegistry.addSvgIcon(
      "edit",
      sanitizer.bypassSecurityTrustResourceUrl("assets/edit.svg")
    );
    iconRegistry.addSvgIcon(
      "remove",
      sanitizer.bypassSecurityTrustResourceUrl("assets/remove.svg")
    );

    this.routerSub = router.events.subscribe((e) => {
      if (e instanceof NavigationStart || e instanceof ActivationStart) {
        this.loadingRoute = true;
      } else if (
        e instanceof NavigationEnd ||
        e instanceof NavigationError ||
        e instanceof NavigationCancel
      ) {
        this.loadingRoute = false;

        this.selectCurrentRoute();
      }
    });
    this.userEmail$ = this.authService.getUserEmail$();
  }

Example #11

Source File: different-image-types.component.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License

5 votes

constructor(private readonly _matIconRegistry: MatIconRegistry, private readonly _domSanitizer: DomSanitizer) {
        this._matIconRegistry.addSvgIconSetInNamespace(
            'px-icons',
            this._domSanitizer.bypassSecurityTrustResourceUrl(iconSet)
        );
    }

Example #12

Source File: icon.module.ts From fyle-mobile-app with MIT License

5 votes

constructor(private domSanitizer: DomSanitizer, private matIconRegistry: MatIconRegistry) {
    this.svgImageArray.forEach((imageName) => {
      this.matIconRegistry.addSvgIcon(imageName.replace('.svg', ''), this.setPath(`${this.path}/${imageName}`));
    });
  }

Example #13

Source File: icons.component.ts From ng-ant-admin with MIT License

5 votes

constructor( iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    // Note that we provide the icon here as a string literal here due to a limitation in
    // Stackblitz. If you want to provide the icon from a URL, you can use:
    // `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
    iconRegistry.addSvgIconLiteral('thumbs-up', sanitizer.bypassSecurityTrustHtml(THUMBUP_ICON));

  }

Example #14

Source File: app.component.ts From wingsearch with GNU General Public License v3.0

5 votes

constructor(private cookies: CookiesService, registry: MatIconRegistry, sanitizer: DomSanitizer) {
    registry.addSvgIcon('externalLink', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/svg/external-link.svg'))
  }

Example #15

Source File: svg-icon.component.ts From matx-angular with MIT License

5 votes

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'thumbs-up',
        sanitizer.bypassSecurityTrustResourceUrl('./assets/images/svgIconExample.svg'));
  }

Example #16

Source File: icon.module.ts From fyle-mobile-app with MIT License

4 votes

@NgModule({
  declarations: [],
  imports: [CommonModule, MatIconModule],
  exports: [MatIconModule],
  providers: [MatIconRegistry],
})
export class IconModule {
  path = '../../assets/svg';

  svgImageArray = [
    'add-advance.svg',
    'add-expense.svg',
    'add-mileage.svg',
    'add-per-diem.svg',
    'arrow-prev.svg',
    'arrow-next.svg',
    'add-report.svg',
    'add-trip.svg',
    'auto_fyle.svg',
    'add-to-list.svg',
    'attachment.svg',
    'bike.svg',
    'bulk.svg',
    'bus.svg',
    'building.svg',
    'bulk-mode.svg',
    'car.svg',
    'chevron-right.svg',
    'create-expense.svg',
    'create-mileage.svg',
    'create-per-diem.svg',
    'curve.svg',
    'comments-zero-state',
    'circle.svg',
    'card-filled.svg',
    'close.svg',
    'capture.svg',
    'camera-pointer-top-left.svg',
    'camera-pointer-top-right.svg',
    'camera-pointer-bottom-left.svg',
    'camera-pointer-bottom-right.svg',
    'danger.svg',
    'duplicate.svg',
    'entertainment.svg',
    'expense.svg',
    'error.svg',
    'edit.svg',
    'error-filled.svg',
    'flight.svg',
    'food.svg',
    'flash-off.svg',
    'flash-on.svg',
    'fy-add-new-expense.svg',
    'fy-advances-new.svg',
    'fy-arrow-down.svg',
    'fy-attachment.svg',
    'fy-bike.svg',
    'fy-bot.svg',
    'fy-bus.svg',
    'fy-calendar.svg',
    'fy-camera.svg',
    'fy-car-mini.svg',
    'fy-car.svg',
    'fy-card.svg',
    'fy-cards-new.svg',
    'fy-chat.svg',
    'fy-classify-ccc.svg',
    'fy-close.svg',
    'fy-corporate-card.svg',
    'fy-cyclist.svg',
    'fy-dashboard-new.svg',
    'fy-delegate-switch.svg',
    'fy-delete.svg',
    'fy-dismiss.svg',
    'fy-done.svg',
    'fy-edit-gradient',
    'fy-electric-car.svg',
    'fy-email.svg',
    'fy-expense.svg',
    'fy-expenses-new.svg',
    'fy-filter.svg',
    'fy-flag-2.svg',
    'fy-help-new.svg',
    'fy-home-solid.svg',
    'fy-home.svg',
    'fy-individual.svg',
    'fy-iphone.svg',
    'fy-info.svg',
    'fy-info-gradient.svg',
    'fy-gallery.svg',
    'fy-matched-no.svg',
    'fy-matched-yes.svg',
    'fy-mileage.svg',
    'fy-matched.svg',
    'fy-notification-solid.svg',
    'fy-notification.svg',
    'fy-non-reimbursable.svg',
    'fy-plus.svg',
    'fy-receipt-attached.svg',
    'fy-receipt-not-attached.svg',
    'fy-receipt.svg',
    'fy-receipts-new.svg',
    'fy-receipts.svg',
    'fy-recently-used.svg',
    'fy-rectangle.svg',
    'fy-reports-new.svg',
    'fy-reports.svg',
    'fy-report.svg',
    'fy-reimbursable.svg',
    'fy-settings.svg',
    'fy-sort-ascending.svg',
    'fy-sort-descending.svg',
    'fy-spinner-circle.svg',
    'fy-switch-new.svg',
    'fy-switch.svg',
    'fy-team-advances-new.svg',
    'fy-team-reports-new.svg',
    'fy-team-trips-new.svg',
    'fy-trips-new.svg',
    'fy-trips.svg',
    'fy-train.svg',
    'fy-wallet.svg',
    'fy-search.svg',
    'fy-clear.svg',
    'flag.svg',
    'fy-unmatched.svg',
    'fy-location.svg',
    'gas.svg',
    'gallery.svg',
    'hotel.svg',
    'insta-fyle.svg',
    'instafyle.svg',
    'internet.svg',
    'ionic-log-out-outline.svg',
    'information.svg',
    'logo-icon-white.svg',
    'logo-white.svg',
    'list.svg',
    'mail.svg',
    'mileage.svg',
    'navigate-left.svg',
    'navigate-right.svg',
    'no-attachment.svg',
    'office-supplies.svg',
    'parking.svg',
    'per_diem.svg',
    'phone.svg',
    'professional-service.svg',
    'plus.svg',
    'profile.svg',
    'rectangle.svg',
    'return-home.svg',
    'search.svg',
    'settings.svg',
    'single.svg',
    'snacks.svg',
    'software.svg',
    'split-expense.svg',
    'send.svg',
    'send-back.svg',
    'success-tick.svg',
    'search-not-found.svg',
    'share.svg',
    'single-mode.svg',
    'tag.svg',
    'tax.svg',
    'taxi.svg',
    'toll-charge.svg',
    'train.svg',
    'training.svg',
    'tick-square-filled.svg',
    'utility.svg',
    'warning-inverted.svg',
    'warning.svg',
    'fy-merge.svg',
  ];

  constructor(private domSanitizer: DomSanitizer, private matIconRegistry: MatIconRegistry) {
    this.svgImageArray.forEach((imageName) => {
      this.matIconRegistry.addSvgIcon(imageName.replace('.svg', ''), this.setPath(`${this.path}/${imageName}`));
    });
  }

  private setPath(url: string): SafeResourceUrl {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}