KPC
Kevin Powell - Community•5w ago
MC23

Replace innerHtml with CSS content SVG

I'm trying to replace innerHtml for injecting a svg with a css class + content, without success: https://stackblitz.com/edit/angular-1vdnfe2h?file=src%2Fapp%2Fapp.component.ts both the original innerHtml and the test replacement can be found here. What am I doing wrong?
7 Replies
ἔρως
ἔρως•5w ago
why? what exactly are you trying to do? what is your goal?
MC23
MC23OP•5w ago
I don't want to use innerHtml due to security reasons and instead add the svg via css property
ἔρως
ἔρως•5w ago
why dont you use a background image? or an <img> element?
Choo♚𝕂𝕚𝕟𝕘
Choo♚𝕂𝕚𝕟𝕘•5w ago
Both createElement() and innerHTML are not normal Angular techniques. Angular has a template system for rendering elements. For conditional rendering, see this: https://v18.angular.dev/essentials/conditionals-and-loops The whole point of using Angular, React, Vue, etc. is that they manage the UI for you without needing such DOM manipulation code.
MC23
MC23OP•5w ago
This is an external library and it doesn't provide any method to customise the toolbar, I already asked Telerik Support and they recommended the css approach Can I use svg with background image? What sets me off is that the svg has in its info the height and width parameters 
.svg-custom-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512'%3E%3Cpath d='M288 352h32v32H192v-32h32v-96h-32v-32h96zm0-224h-64v64h64zm192 128c0 123.7-100.3 224-224 224S32 379.7 32 256 132.3 32 256 32s224 100.3 224 224m-32 0c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192'%3E%3C/path%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
  }
.svg-custom-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512'%3E%3Cpath d='M288 352h32v32H192v-32h32v-96h-32v-32h96zm0-224h-64v64h64zm192 128c0 123.7-100.3 224-224 224S32 379.7 32 256 132.3 32 256 32s224 100.3 224 224m-32 0c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192'%3E%3C/path%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
  }
This is my attempt with background image Ok I was able to solve it with this solution: https://stackoverflow.com/a/21626701
ἔρως
ἔρως•5w ago
scary but should work you didnt encode the slashes and the : otherwise, should work
MC23
MC23OP•5w ago
I like the base64 version more, it's more readable And seems to work better across browsers

Did you find this page helpful?