How to change path color of svg file?

Is it possible to change the svg path color (not background!) if the svg is loaded from local file.

.status-icon1 {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-color: green;
  mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
  -webkit-mask: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat 50% 50%;
}

.status-icon2 {
  width: 48px;
  height: 48px;
  background: url(https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg) no-repeat;
  background-size: cover;
  display: inline-block;
}

<html>

<body>
  <div class="status-icon1"></div>
  <div class="status-icon2"></div>
</body>

</html>

Sidenote: I lateron want to reference the svg files locally, not from the web.

Solution

The best way to implement SVG's into your HTML code and modify it with CSS is another. SVG files contain attributes like stroke or fill. You can try by referencing these attributes with CSS to change its styling. Also a were frequent method is to put as values into these attributes currentColor. So the color is corresponding to its CSS color parameter. Just by changing the wrappers style to color: green you will be able to change the currentColor inside your SVG.

.status {
  fill: #ff11ac;
  width: 10rem;
  height: 10rem;
  color: green;
  
  img {
    fill: #ff11ac;
    width: 10rem;
    height: 10rem;
  }
}

<h2>Change fill paremter with CSS</h2>
<div class="status">
  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>

<h2>Change currentColor with CSS</h2>
<div class="status">
  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" fill="currentColor"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF" style="fill: var(--svg-status-bg, #fff);"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
</div>

<h2>IMG "solution" (won't work)</h2>
<div class="status">
  <img 
    src="https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg"/>
</div>

There are also some other issues:

You shouldn't reference a file inside a repository directly. This won't be allowed by default. So change https://gitlab.com/gitlab-org/gitlab-svgs/blob/main/sprite_icons/status_success.svg to https://gitlab.com/gitlab-org/gitlab-svgs/-/raw/main/sprite_icons/status_success.svg.
If you are adding an SVG as a mask or background, you won't be able to adjust its styling.
Even inserting the file as an src attribute inside an <img/> tag wont't work very well.
Changing the width and height of the SVG that already holds that information (have a look on the SVG code) isn't really possible; not in an elegant.

Solution

So, after all I would recommend you to just copy the SVG code (it isn't really long), remove some attributes like width and height, but leave the viewBox and resize its wrapper or the <svg/> directly with some CSS rulesets.

Last but not least change the fill parameter. That's it.