Custom SVG loader not working in ionic 2

What version of TypeScript, Angular and Ionic are you using? When I try this, I get an error:

TS2345: Argument of type `{content: SafeHtml; cssClass: string; duration: number; showBackdrop: false; spinner: string; }' is not assignable to parameter of type 'LoadingOptions'. Types of property 'content' are incompatible. Type 'SafeHtml' is not assignable to type 'string'.

ionic info

cli packages: 

    @ionic/cli-plugin-proxy : 1.5.6
    @ionic/cli-utils        : 1.19.1
    ionic (Ionic CLI)       : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : ios 4.5.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    ios-sim           : 6.1.2
    Node              : v8.9.3
    npm               : 5.6.0
    OS                : macOS Sierra
    Xcode             : Xcode 9.2 Build version 9C40b

I am also using Angular 5.2.0.

Here is my code snippet:

    const html: string =
`<div class="${componentDefinition}__container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 260">
    <g id="fins">
      <polygon style="fill:#e00" points="0 260 62 260 61.16 253 0.83 253 0 260"/>
      ...
      <polygon style="fill:#e00" points="19.25 98.53 42.75 98.53 41.91 91.53 20.09 91.53 19.25 98.53"/>
    </g>
    <g id="beg_tri" data-name="beg tri">
      <polygon style="fill:#e00" points="45 132 40 80 54 80 45 132"/>
      ...
      <path style="fill:#0003d4" d="M370,244.9" transform="translate(-344 -244.9)"/>
      <polygon style="fill:#fff" points="40 80 39 80 45 132 40 80"/>
    </g>
  </svg>
</div>`;

    const safeHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(html);

    this.spinner = this.loadingController.create({
      content: safeHtml,
      cssClass: componentDefinition,
      duration: durationInMilliseconds,
      showBackdrop: false,
      spinner: 'hide'
    });