All icon providers (fontawesome, ionicons, google material icons) are failing to show in my Electron App

Viewed 76

I'm working on my first Electron app and attempting to make a custom title bar. I have designed it all and now I'm trying to add in a custom exit button icon. On load the console is showing me this error -

Refused to load the stylesheet 'https://fonts.googleapis.com/icon?family=Material+Icons' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Here is my code

  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <link rel="stylesheet" href="./titlebar.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script defer src="./titlebar.js"></script>
    <title>Hello World!</title>
  </head>



  <body>

    <div id="titlebar" class="drag">

      <div id="other-buttons">
        <p>this is the title bar</p>
      </div>

      <div id="control-buttons">
        <button id="minBtn" class="no-drag ctrlBtn" title="Minimize">-</button>
        <button id="maxBtn" class="no-drag ctrlBtn" title="Maximize">O</button>
        <i id="closeBtn" class="no-drag ctrlBtn" title="Close"></i>
        <span class="material-icons-outlined"></span>
      </div>

    </div>


    <div> 
      <span>hey</span>
    </div>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>




</html>

I can fix this by commenting out the meta tag security policy in the head. But the icon still doesn't show and instead I get -

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled. This exposes users of this app to unnecessary security risks.

Is there a way I can fix both issues and get the icon to load?

0 Answers
Related