How to use custom webpack and url-loader with angular 14

Question

I'm at a total loss how this should be setup.

The short version is: How do I use a load like url-loader together with angular to url encode fonts in CSS?

I am using primeicons, which don't really work on the platform I'm deploying it to for various reasons. The simplest solution would be to embed the fonts directly in the css, which is possible with url-loader, and search them from there instead of as files.

I am using https://www.npmjs.com/package/@angular-builders/custom-webpack to attempt this, but I can't get it to work.

My custom-webpack.config.ts file looks like this:

import * as webpack from 'webpack';
import {
  CustomWebpackBrowserSchema,
  TargetOptions,
} from '@angular-builders/custom-webpack';

export default (
  config: webpack.Configuration,
  options: CustomWebpackBrowserSchema,
  targetOptions: TargetOptions
) => {
  config.module.rules.push({
    test: /\.(woff|woff2|eot|ttf)$/,
    loader: 'url-loader',
    options: {
      limit: 100000,
    },
  });
  return config;
};

and my angular.json

            "build": {
              "builder": "@angular-builders/custom-webpack:browser",
              "options": {
                "customWebpackConfig": {
                  "path": "./custom-webpack.config.ts"
                },

I'm importing the files in styles.scss

@import 'primeflex/primeflex.scss';
@import 'primeicons/primeicons.css';
@import "primeng/resources/themes/tailwind-light/theme.css";
@import "primeng/resources/primeng.min.css";

Imports are working fine, and the css I'm getting includes the imported files...but it's still using referring to the font file and not the base64 encoded and putting the font files into the dist folder when being built.

I'm trying to read up on webpack and angular, but I'm not really sure where the problem is coming from.

Not sure what else I should be trying. How can I get the fonts embedded as base64 in the final style.css output by ng build?