Can a WKWebView somehow display SF Symbols?

Does anyone know if it’s possible for a WKWebView showing a web page in the app bundle - a help screen in my case - to show SF Symbols, by name? I’d like the help page to include some of the symbols that I use for buttons elsewhere in the app. Can I do this without having to make PNGs of the symbols?

Thanks.

OK, here's what I've got. In my help.html:

<p>To show more options, press the More <img src="symbol:ellipsis.circle"/> button.</p>

In my help screen's view controller, I have something like

symbol_handler = [[SymbolURLHandler alloc] init];
auto config = [[WKWebViewConfiguration alloc] init];
[config setURLSchemeHandler: symbol_handler forURLScheme: @"symbol"];
webview = [[WKWebView alloc] initWithFrame: self.bounds configuration: config];

SymbolURLHandler is:

// SymbolURLHandler.hh:

#import <WebKit/Webkit.h>

@interface SymbolURLHandler: NSObject<WKURLSchemeHandler>
{
};

@end
// SymbolURLHandler.mm:

#import "SymbolURLHandler.hh"

#import <UIKit/UIImage.h>
#import <UIKit/UIImageSymbolConfiguration.h>


@implementation SymbolURLHandler

-(void) webView: (WKWebView*) webView 
        startURLSchemeTask: (id<WKURLSchemeTask>) urlSchemeTask
{
  auto req = urlSchemeTask.request;
  auto url = req.URL;
  auto name = [url.absoluteString substringFromIndex: 7];  // 7 == strlen("symbol:");

  UIImageConfiguration* image_configuration =
    [UIImageSymbolConfiguration configurationWithPointSize: 16  // ???
                                                    weight: UIImageSymbolWeightLight
                                                     scale: UIImageSymbolScaleMedium];
  UIImage* uiimg = [UIImage systemImageNamed: name
                           withConfiguration: image_configuration];
  if (!uiimg) {
    auto error = [NSError errorWithDomain: NSURLErrorDomain
                                     code: NSURLErrorFileDoesNotExist
                                 userInfo: nil];
    [urlSchemeTask didFailWithError: error];
    return;
  }   

  auto data = [[NSMutableData alloc] init];
  
  auto dest = CGImageDestinationCreateWithData((CFMutableDataRef)data, (CFStringRef)@"public.png", 1, NULL);
  CGImageDestinationAddImage(dest, uiimg.CGImage, NULL);
  CGImageDestinationFinalize(dest);
  CFRelease(dest);

  auto resp = [[NSURLResponse alloc] initWithURL: req.URL
                                        MIMEType: @"image/png"
                           expectedContentLength: data.length
                                textEncodingName: nil];
  
  [urlSchemeTask didReceiveResponse: resp];
  [urlSchemeTask didReceiveData: data];
  [urlSchemeTask didFinish];
}


-(void) webView: (WKWebView*) webView
        stopURLSchemeTask: (id<WKURLSchemeTask>) urlSchemeTask
{
}


@end

And it works!

There are clearly a few things missing:

  • The webview doesn't tell the symbol handler what the current font size, colour etc. is.
  • The symbol handler doesn't tell the webview the symbol's baseline or padding metrics.
  • The image is shown with scale 1, not at "retina" resolution.
  • I'm not sure if I should use dispatch_async() to make multiple invocations run concurrently, or whether WebKit does that for me.
  • I'm not sure if I should be caching my PNGs, or whether WebKit does that for me, or maybe I need to include something in the response telling it that they are cacheable.

Any thoughts about those or other improvements would be gratefully received!

Can a WKWebView somehow display SF Symbols?
 
 
Q